/* Base Variables */
:root {
    --primary-color: #004d40;
    /* Teal/Green Dark - Sanidad */
    --secondary-color: #0d47a1;
    /* Blue Dark - Profesionalismo */
    --accent-color: #ffca28;
    /* Amber - Highlights */
    --text-color: #333;
    --light-bg: #f5f5f5;
    --white: #ffffff;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --transition: all 0.3s ease;
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 20px;
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    color: var(--secondary-color);
    margin-bottom: 40px;
}

/* Buttons */
.btn-presupuesto,
.btn-hero,
.btn-water,
.btn-submit,
.btn-outline {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    transition: var(--transition);
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-presupuesto {
    background-color: var(--accent-color);
    color: #000;
}

.btn-presupuesto:hover {
    background-color: #ffb300;
    transform: translateY(-2px);
}

.btn-hero {
    background-color: var(--accent-color);
    color: #000;
    font-size: 1.1rem;
    padding: 15px 30px;
    margin-top: 20px;
}

.btn-hero:hover {
    background-color: #ffb300;
    transform: scale(1.05);
}

.btn-water {
    background-color: var(--white);
    color: var(--text-color);
    margin-top: 20px;
}

.btn-water:hover {
    background-color: #e0e0e0;
}

.btn-submit {
    background-color: var(--secondary-color);
    color: var(--white);
    border: none;
    width: 100%;
}

.btn-submit:hover {
    background-color: #062f70;
}

.btn-outline {
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    margin-top: 20px;
}

.btn-outline:hover {
    background-color: var(--secondary-color);
    color: var(--white);
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: var(--transition);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
}

.logo img {
    height: 60px;
    /* Adjust based on actual logo ratio */
}

.nav-list {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-list a {
    font-weight: 500;
    color: var(--secondary-color);
    font-size: 0.95rem;
}

.nav-list a:hover {
    color: var(--primary-color);
}

.nav-list a.highlight-link {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 8px 16px;
    border-radius: 20px;
    transition: var(--transition);
}

.nav-list a.highlight-link:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    display: none;
    border-radius: 4px;
    flex-direction: column;
}

.dropdown:hover .dropdown-menu {
    display: flex;
}

.dropdown-menu a {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

.mega-menu {
    min-width: 300px;
    display: none;
    /* Controlled by flex usually for multi-col? Keeping simple 1-col for now based on request list */
    max-height: 400px;
    overflow-y: auto;
}

/* If list is long, maybe double column? keeping single for simplicity first */

.menu-toggle {
    display: none;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--secondary-color);
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    /* Use fixed attachment for parallax-like feel if image high enough res, else standard cover */
    background: url('imagenes/header-bg.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    margin-top: 80px;
    /* Offset for fixed nav */
}

/* Industrial Hero override */
.hero-industrial {
    background: url('imagenes/tarjeta-industrial.jpg') no-repeat center center/cover;
}

/* Commercial Hero override */
.hero-comercial {
    background: url('imagenes/tarjeta-comercial.jpg') no-repeat center center/cover;
}

/* Institutional Hero override */
.hero-institucional {
    background: url('imagenes/tarjeta-institucional.jpg') no-repeat center center/cover;
}

/* Residential Hero override */
.hero-residencial {
    background: url('imagenes/tarjeta-residencial.jpg') no-repeat center center/cover;
}

/* Cockroach Hero override */
.hero-cucarachas {
    background: url('imagenes/cucaracha-alemana-vs-americana.jpg') no-repeat center center/cover;
}

/* Ants Hero override */
.hero-hormigas {
    background: url('imagenes/hero-hormigas.jpg') no-repeat center center/cover;
}

/* Fleas Hero override */
.hero-pulgas {
    background: url('imagenes/hero-pulga.png') no-repeat center center/cover;
}

/* Ticks Hero override */
.hero-garrapatas {
    background: url('imagenes/hero-garrapata.png') no-repeat center center/cover;
}

/* Rodent Hero override */
.hero-ratas {
    background: url('imagenes/hernan-desratizacion.jpg') no-repeat center center/cover;
}

@media (min-width: 1024px) {
    .hero-ratas {
        background: url('imagenes/hernan-desratizacion-panoramica.png') no-repeat center center/cover;
    }
}

/* Bed Bugs Hero override */
.hero-chinches {
    background: url('imagenes/fumigando-chinche-cama.jpg') no-repeat center center/cover;
}

/* Chinche Verde Hero override */
.hero-chinche-verde {
    background: url('imagenes/fumigador-chinche-verde-cuadrada.jpg') no-repeat center center/cover;
}

/* Desinfeccion Hero override */
.hero-desinfeccion {
    background: url('imagenes/tecnico-ulv-pan.jpg') no-repeat center center/cover;
}

/* Murcielagos Hero override */
.hero-murcielagos {
    background: url('imagenes/edificio.jpg') no-repeat center center/cover;
}

/* Mosquitos Hero override */
.hero-mosquitos {
    background: url('imagenes/fumigacion-mosquitos-ulv.jpg') no-repeat center center/cover;
}

/* Acaros Hero override (Mobile first - Vertical) */
.hero-acaros {
    background: url('imagenes/persona-alergia-vertical.jpg') no-repeat center center/cover;
}

@media (min-width: 1024px) {
    /* Keeping generic panoramic for now if new wide one not provided, OR using same new image if high res.
       User request implies replacing the hero image logic. I'll comment out the old override to use the new specific image everywhere unless it looks bad. */
    /* .hero-chinches {
        background: url('imagenes/chinches-panoramica.png') no-repeat center center/cover;
    } */

    .hero-chinche-verde {
        background: url('imagenes/fumigador-chinche-verde.jpg') no-repeat center center/cover;
    }

    .hero-acaros {
        background: url('imagenes/persona-alergia.jpg') no-repeat center center/cover;
    }
}

/* Alacranes Hero */
.hero-alacranes {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('imagenes/Tityus-trivittatus.jpg') no-repeat center center/cover;
}

/* Polillas Hero */
.hero-polillas {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('imagenes/hero-polillas.png') no-repeat center center/cover;
}

/* Aranas Hero */
.hero-aranas {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('imagenes/araña-violinista1.jpg') no-repeat center center/cover;
}

@media (min-width: 1024px) {
    .hero-aranas {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('imagenes/araña-violinista.jpg') no-repeat center center/cover;
    }
}

/* Tanques Hero */
.hero-tanques {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('imagenes/limpiando-tanque.jpg') no-repeat center center/cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 30px;
}

/* About Section */
.about-section {
    padding: 80px 0;
    background-color: var(--white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.about-image img {
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.about-text h2 {
    color: var(--primary-color);
}

/* Services Cards */
.services-section {
    padding: 80px 0;
    background-color: var(--light-bg);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.service-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.service-info {
    padding: 20px;
    text-align: center;
}

.service-info h3 {
    color: var(--secondary-color);
    margin-bottom: 0;
}

/* Pests Grid */
.pests-section {
    padding: 80px 0;
}

.pests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 20px;
    text-align: center;
}

.pest-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: var(--transition);
    text-decoration: none;
    /* Remove underline */
    color: inherit;
    /* Inherit text color */
}

.pest-item:hover {
    border-color: var(--primary-color);
    background-color: #f9fdf9;
}

.pest-item img {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    object-fit: contain;
}

.pest-item span {
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
}

/* Water Tanks */
.water-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--secondary-color), #42a5f5);
    color: var(--white);
    text-align: center;
}

/* Why Choose Us & Pillars (Shared structure) */
/* Services Critical Section */
.services-critical-section {
    padding: 80px 0;
    background-color: var(--white);
}

.why-us-section,
.pillars-section {
    padding: 80px 0;
}

.why-us-grid,
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.why-item,
.pillar-item {
    text-align: center;
    padding: 20px;
}

.why-item i,
.pillar-item i {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.pillar-item img.custom-icon {
    height: 60px;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.why-item h3,
.pillar-item h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

/* Intro Section */
.intro-section {
    padding: 60px 0;
    text-align: center;
    background-color: var(--light-bg);
}

.intro-content {
    max-width: 900px;
    margin: 0 auto;
}

.intro-content p {
    font-size: 1.1rem;
    color: #555;
}

/* Sectors Section */
.sectors-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.sectors-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 800px;
    margin: 0 auto;
}

.sectors-list li {
    background: var(--white);
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 500;
}

.sectors-list li i {
    color: var(--primary-color);
}

/* Sector Cards (Commercial) */
.sectors-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.sector-card {
    background: var(--white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: var(--transition);
    border: 1px solid #eee;
}

.sector-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.sector-card i {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
    display: block;
}

.sector-card span {
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
    color: var(--text-color);
}

.sector-card small {
    color: #666;
}

/* CTA Section */
.cta-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--primary-color);
    color: var(--white);
}

.cta-section h2 {
    color: var(--white);
    margin-bottom: 15px;
}

.cta-section p {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

/* Industrial Pests */
.industrial-pests .pest-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pest-desc {
    font-size: 0.85rem;
    color: #777;
    margin-top: 5px;
    max-width: 200px;
    /* Ensure text wraps within this width */
}

/* Specific grid for Industrial page where items have text */
.industrial-pests .pests-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: start;
    /* Align tops */
}

/* Contact & Footer */
.footer {
    background-color: #1a1a1a;
    color: #ddd;
    padding: 60px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 40px;
}

.footer h3 {
    color: var(--white);
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    padding-bottom: 10px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-family: inherit;
}

.footer-info p {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-info i {
    color: var(--accent-color);
    width: 20px;
}

.maps-container {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333;
    font-size: 0.9rem;
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    transition: var(--transition);
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Scroll Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Residential Pests Grid (Specific Treatments) */
.specific-treatments-section .pests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.pest-card {
    background: var(--white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    border: 1px solid #eee;
    text-align: center;
    height: 100%;
    /* Equal height */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pest-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pest-card img {
    height: 80px;
    /* Specific size for icons */
    width: auto;
    object-fit: contain;
    margin-bottom: 20px;
    display: block;
}

.pest-card h3 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.pest-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* Star Product Section (Residential) */
.star-product-section {
    padding: 80px 0;
    background-color: #e0f2f1;
    /* Soft teal background */
    text-align: center;
}

.star-product-header {
    margin-bottom: 4rem;
}

.badge-star {
    background-color: var(--accent-color);
    color: var(--text-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 15px;
}

.star-subtitle {
    font-size: 1.2rem;
    color: var(--primary-color);
    max-width: 800px;
    margin: 0 auto;
}

.star-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.star-feature {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.star-feature h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.star-feature ul {
    list-style: none;
    padding: 0;
}

.star-feature ul li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.star-feature ul li::before {
    content: "•";
    color: var(--accent-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.plus-feature {
    color: var(--secondary-color);
    font-weight: 500;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.plan-options {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
}

.plan-badges {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.plan-badge {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
}

/* Specific Treatments Section */
.specific-treatments-section {
    padding: 80px 0;
    text-align: center;
}

.section-subtitle {
    max-width: 700px;
    margin: -30px auto 50px;
    color: #666;
}

.multi-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.multi-icons img {
    height: 40px;
    width: auto;
}

/* Safety Section */
.safety-section {
    padding: 60px 0;
    background-color: #fff9c4;
    /* Light yellow inspired by 'care' */
    text-align: center;
}

.safety-content i {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.safety-content h2 {
    margin-bottom: 20px;
    color: var(--text-color);
}

.safety-content p {
    max-width: 800px;
    margin: 0 auto;
}

/* Cockroach Page Styles */
.pest-identification-section {
    padding: 80px 0;
}

.pest-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.pest-type-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.pest-image-container {
    height: 250px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.pest-image-placeholder {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0f2f1;
    color: var(--primary-color);
}

.pest-type-card img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.pest-info {
    padding: 25px;
}

.pest-info h3 {
    color: var(--secondary-color);
    margin-bottom: 5px;
}

.pest-info h4 {
    color: #666;
    font-style: italic;
    margin-bottom: 20px;
    font-weight: 400;
}

.pest-info ul {
    list-style: none;
}

.pest-info ul li {
    margin-bottom: 12px;
    font-size: 0.95rem;
}

/* Treatments Section */
.treatments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.treatment-card {
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 5px solid var(--primary-color);
}

.treatment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.treatment-badge {
    background: var(--primary-color);
    color: var(--white);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.treatment-badge.warning {
    background: #d32f2f;
}

.treatment-desc {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--text-color);
}

.feature-list {
    margin-bottom: 20px;
}

.feature-list li {
    margin-bottom: 10px;
}

.note {
    background-color: #e3f2fd;
    padding: 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    color: #0d47a1;
}

.advantages-box {
    margin-top: 20px;
    background-color: #e8f5e9;
    padding: 20px;
    border-radius: 8px;
}

.advantages-box h4 {
    color: #1b5e20;
    margin-bottom: 15px;
}

.advantages-box i {
    color: #2e7d32;
    margin-right: 10px;
}

.guarantee-box {
    margin-top: 25px;
    border-top: 1px dashed #ccc;
    padding-top: 15px;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* SEO Section */
.seo-info-section {
    padding: 60px 0;
}

.seo-content-box {
    background-color: #fff3e0;
    /* Pale orange backing */
    padding: 40px;
    border-radius: 10px;
    border-left: 5px solid var(--accent-color);
}

.seo-text {
    font-size: 1.05rem;
    line-height: 1.7;
}

.seo-text p {
    margin-bottom: 15px;
}

/* Bed Bugs Page Specifics */
.pest-types-grid.two-columns {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-content: center;
}

.highlight-card {
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.highlight-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-list {
    text-align: left;
    margin-top: 15px;
    padding-left: 20px;
}

.feature-list li {
    margin-bottom: 8px;
}

/* Treatment Themes */
.treatment-card.red-theme .treatment-header {
    background: #d32f2f;
    color: white;
}

.treatment-card.green-theme .treatment-header {
    background: #388e3c;
    color: white;
}

.treatment-card.red-theme .treatment-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.treatment-card.green-theme .treatment-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.treatment-details {
    margin-top: 20px;
    text-align: left;
}

.treatment-details p {
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.safety-note {
    background: #fff3e0;
    padding: 10px;
    border-radius: 4px;
    margin: 15px 0;
    font-size: 0.9rem;
    border-left: 4px solid #ff9800;
}

.warranty {
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 15px;
}

/* Why Us Section */
.why-us-section {
    padding: 80px 0;
    background: white;
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.feature-item {
    padding: 30px;
    border-radius: 10px;
    background: #f8f9fa;
    transition: var(--transition);
}

.feature-item:hover {
    background: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.feature-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.feature-item h3 {
    margin-bottom: 15px;
    color: var(--dark-color);
}

/* Fleas Page Specific Styles */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.info-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: var(--transition);
    border-top: 4px solid var(--secondary-color);
}

.info-card:hover {
    transform: translateY(-5px);
}

.info-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.info-card.warning {
    border-top-color: #e65100;
    background-color: #fff8e1;
}

.info-card.warning h3 {
    color: #e65100;
}

.clinical-protocol-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.protocol-header {
    background: var(--primary-color);
    color: white;
    padding: 30px;
    text-align: center;
}

.protocol-body {
    padding: 40px;
}

.protocol-list {
    list-style: none;
    padding: 0;
}

.protocol-list li {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.protocol-list li i {
    background: #e8f5e9;
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.safety-box {
    background: #ffebee;
    border-left: 5px solid #d32f2f;
    padding: 20px;
    margin-top: 30px;
    border-radius: 4px;
}

.safety-box h4 {
    color: #d32f2f;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .nav-list {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: var(--white);
        flex-direction: column;
        align-items: center;
        padding-top: 40px;
        transition: 0.4s;
    }

    .nav-menu.active .nav-list {
        left: 0;
    }

    .nav-list li {
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .dropdown-menu {
        position: static;
        display: none;
        box-shadow: none;
        background: #f9f9f9;
        text-align: center;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
        /* Simplistic toggle for CSS, JS might be better for mobile dropdowns, but this works if hover isn't issue or just rely on click-through to sections */
    }

    .btn-presupuesto {
        display: none;
        /* Hide top button on mobile, rely on Hero CTA and floating WA */
    }

    .about-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .logo img {
        height: 50px;
    }
}

/* Coverage Zones Grid */
.zones-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: left;
}

.zone-card {
    background: var(--white);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--primary-color);
    transition: transform 0.3s ease;
}

.zone-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.zone-card h3 {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .zones-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .zones-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Enforced 2x2 for balance */
    }
}