/* ==========================================================================
   PLANIDENT — style.css
   Mobile-first (la mayoría de pacientes busca desde el celular — brief §4)
   Paleta extraída del logo: teal (marca), rosa (acento/CTA), amarillo (detalle)
   ========================================================================== */

:root {
    --color-teal: #2FA084;
    --color-teal-dark: #23806a;
    --color-rosa: #E8527A;
    --color-rosa-dark: #d63d64;
    --color-amarillo: #F5C518;
    --color-texto: #2b2b2b;
    --color-texto-suave: #5a5a5a;
    --color-fondo: #ffffff;
    --color-fondo-suave: #f7faf9;
    --color-borde: #e2e8e6;

    --font-base: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --radius: 12px;
    --sombra: 0 4px 14px rgba(0, 0, 0, 0.08);
    --container-max: 1140px;
}

/* ---------- Reset básico ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Salvaguarda: evita scroll horizontal accidental en mobile si algún
   elemento se desborda del viewport (imágenes, carrusel, etc.) */
html, body { max-width: 100%; overflow-x: hidden; }

body {
    font-family: var(--font-base);
    color: var(--color-texto);
    background: var(--color-fondo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--color-teal);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--color-rosa); }

h1, h2, h3, h4 {
    line-height: 1.25;
    color: var(--color-texto);
    font-weight: 700;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.15rem; }

p { color: var(--color-texto-suave); }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}

section { padding: 2.5rem 0; }

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
    background: var(--color-rosa);
    color: #fff;
    box-shadow: var(--sombra);
}
.btn-primary:hover { background: var(--color-rosa-dark); color: #fff; }

.btn-secondary {
    background: transparent;
    color: var(--color-teal);
    border: 2px solid var(--color-teal);
}
.btn-secondary:hover { background: var(--color-teal); color: #fff; }

.btn-whatsapp {
    background: #25D366;
    color: #fff;
}
.btn-whatsapp:hover { background: #1ea952; color: #fff; }

.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 100;
    box-shadow: 0 1px 0 var(--color-borde);
}

/* Barra superior auxiliar (teléfono / correo) */
.header-top {
    background: var(--color-fondo-suave);
    border-bottom: 1px solid var(--color-borde);
    font-size: 0.8rem;
}
.header-top-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 0.7rem 1.25rem;
}
.header-top-contacto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}
.header-top-inner a { color: var(--color-texto-suave); }
.header-top-inner a:hover { color: var(--color-rosa); }

/* Fila principal: logo (izq) + nav (centro) */
.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    transition: padding 0.25s ease;
}

.main-nav { width: 100%; }

.logo { height: 64px; width: auto; transition: height 0.25s ease; }

/* Logo más pequeño cuando se hace scroll */
.site-header.is-scrolled .header-inner { padding: 0.5rem 1.25rem; }
.site-header.is-scrolled .logo { height: 44px; }

/* ---------- Navegación ---------- */

.main-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 0.95rem;
    font-weight: 600;
}
.main-nav > ul > li { position: relative; width: 100%; }
.main-nav > ul > li > a { display: block; padding: 0.75rem 1.25rem; border-radius: 0; }

.main-nav a {
    color: var(--color-texto);
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    display: inline-block;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.main-nav a:hover {
    background-color: rgba(47, 160, 132, 0.12); /* verde suave de marca */
    color: var(--color-teal-dark);
}
.main-nav a.nav-no-link { cursor: default; }
.main-nav a.nav-no-link:hover { background-color: rgba(47, 160, 132, 0.12); color: var(--color-teal-dark); }

/* Íconos de redes sociales dentro del menú: fila propia, no columna */
.nav-social {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem 1.25rem;
}
.nav-social a {
    display: inline-flex;
    padding: 0.35rem;
}
.nav-social a svg { width: 26px; height: 26px; }

/* ---------- Botón hamburguesa (solo mobile) ---------- */
.logo-link { order: 1; }
.menu-toggle {
    order: 2;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--color-teal-dark);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Animación a "X" cuando el menú está abierto */
.menu-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* En mobile: el nav se oculta por defecto y se despliega como panel */
.main-nav {
    width: 100%;
    order: 3;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.main-nav.is-open { max-height: 600px; }

.has-dropdown .dropdown {
    display: none;
    position: static;
    background: var(--color-fondo-suave);
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0;
    z-index: 50;
}
.has-dropdown.is-open .dropdown { display: block; }
.has-dropdown .dropdown a { padding-left: 2.25rem; font-weight: 500; }

/* Flecha indicadora de submenú expandible (solo mobile) */
.has-dropdown > .nav-no-link::after {
    content: "▾";
    float: right;
    transition: transform 0.2s ease;
}
.has-dropdown.is-open > .nav-no-link::after { transform: rotate(180deg); }

.dropdown li { width: 100%; }
.dropdown a {
    padding: 0.6rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 500;
}
.dropdown a::before {
    content: "→";
    color: var(--color-teal);
    flex-shrink: 0;
    line-height: 1.4;
}
.dropdown a:hover { background: var(--color-fondo-suave); }
.dropdown a:hover::before { color: var(--color-rosa); }

/* ---------- Hero ---------- */
.hero { background: var(--color-fondo-suave); padding: 3rem 0; }

.hero-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    text-align: center;
}

.hero-subtitle { margin: 1rem 0 1.5rem; font-size: 1.05rem; }

.hero-cta { display: flex; flex-direction: column; gap: 0.75rem; }

.hero-image img { border-radius: var(--radius); box-shadow: var(--sombra); }

/* ---------- Cards / Grid ---------- */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.card {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--sombra);
}

.card h3 { color: var(--color-teal-dark); margin-bottom: 0.5rem; }

.servicio-card .card-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--color-rosa);
}

.section-intro { max-width: 640px; }

.ver-todos { text-align: center; margin-top: 1.5rem; }

/* ---------- Carrusel de especialidades (Home) ---------- */
.carrusel-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem;
    margin-top: 1.5rem;
    width: 100%;
}

.carrusel-viewport { overflow: hidden; flex: 1 1 auto; min-width: 0; }

.carrusel-track {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.25rem;
    transition: transform 0.4s ease;
    will-change: transform;
}

.carrusel-track .carrusel-item {
    flex: 0 0 calc(100% - 0.5rem) !important;
    min-width: 0;
    max-width: calc(100% - 0.5rem);
}

.carrusel-flecha {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-borde);
    color: var(--color-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--sombra);
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.carrusel-flecha:hover { background: var(--color-teal); color: #fff; }
.carrusel-flecha:active { transform: scale(0.95); }
.carrusel-flecha:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}
.carrusel-flecha:disabled:hover { background: #fff; color: var(--color-teal-dark); }

/* ---------- Secciones específicas ---------- */
.por-que-elegirnos { background: #fff; }
.servicios-destacados { background: var(--color-fondo-suave); }

.por-que-elegirnos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}
/* min-width:0 es necesario en items de grid que contienen imágenes anchas:
   por defecto un grid item no se encoge más allá del tamaño intrínseco de
   su contenido, así que una foto ancha empuja la columna entera (y todo lo
   que comparte esa columna, como las tarjetas de abajo) fuera del viewport
   en mobile — causa típica de scroll horizontal inesperado. */
.por-que-elegirnos-img,
.por-que-elegirnos-texto {
    min-width: 0;
}
.por-que-elegirnos-img img {
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    height: 260px;
    width: 100%;
    object-fit: cover;
}



.cta-final {
    background: var(--color-teal);
    color: #fff;
    text-align: center;
    padding: 30px 0;
}
.cta-final h2, .cta-final p { color: #fff; }
.cta-final p { margin-top: 0.5rem; }
.cta-final .btn-primary { background: var(--color-amarillo); color: var(--color-texto); margin-top: 1.5rem; }
.cta-final .btn-primary:hover { background: #e0b510; }

/* ---------- Footer ---------- */
.site-footer {
    background: #1f2d2a;
    color: #cfd8d5;
    padding: 2.5rem 0 1rem;
    margin-top: 2rem;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.footer-col h4 { color: #fff; margin-bottom: 0.75rem; font-size: 1rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.4rem; }
.footer-col a { color: #cfd8d5; }
.footer-col a:hover { color: var(--color-amarillo); }

.footer-logo { height: 36px; margin-bottom: 0.5rem; filter: brightness(0) invert(1); }

.footer-social { display: flex; gap: 1rem; margin-top: 0.75rem; }
.footer-social a {
    color: #cfd8d5;
    display: flex;
    align-items: center;
    transition: color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { color: var(--color-amarillo); transform: translateY(-2px); }

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem;
    color: #8a9a96;
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float {
    position: fixed;
    /* env(safe-area-inset-*) evita que quede tapado por el home indicator
       de iPhone o la barra inferior de algunos navegadores móviles —
       causa típica de "el ícono no se ve" en ciertos teléfonos */
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    right: calc(1.5rem + env(safe-area-inset-right, 0px));
    background: #25D366;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 0 4px #ffffff;
    z-index: 200;
    animation: whatsapp-pulso 2.5s ease-in-out infinite;
}

@media (max-width: 480px) {
    .whatsapp-float {
        width: 54px;
        height: 54px;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        right: calc(1rem + env(safe-area-inset-right, 0px));
    }
    .whatsapp-float img,
    .whatsapp-float svg { width: 26px; height: 26px; }
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float img,
.whatsapp-float svg { width: 32px; height: 32px; }

@keyframes whatsapp-pulso {
    0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 4px #fff, 0 0 0 4px rgba(37,211,102,0.4); }
    50% { box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 4px #fff, 0 0 0 12px rgba(37,211,102,0); }
}

/* ---------- Página de servicio individual ---------- */
.servicio-hero { position: relative; padding: 0; }

.servicio-hero-img { width: 100%; height: 260px; overflow: hidden; }
.servicio-hero-img img { width: 100%; height: 100%; object-fit: cover; }

.servicio-hero-caption {
    padding: 1.5rem 0;
    text-align: center;
}
.servicio-hero-caption .btn { margin-top: 1rem; }

.servicio-detalle-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}
/* Mismo fix que .por-que-elegirnos-img: evita que una imagen ancha
   empuje la columna del grid fuera del viewport en mobile. */
.servicio-detalle-texto,
.servicio-detalle-img {
    min-width: 0;
}

.servicio-detalle-texto h2 { color: var(--color-teal-dark); }
.servicio-detalle-texto h3 { margin-top: 1.25rem; margin-bottom: 0.5rem; }

.lista-check { list-style: none; }
.lista-check li {
    padding-left: 1.6rem;
    position: relative;
    margin-bottom: 0.5rem;
    color: var(--color-texto-suave);
}
.lista-check li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--color-teal);
    font-weight: 700;
}

.servicio-detalle-img img { border-radius: var(--radius); box-shadow: var(--sombra); }
.servicio-detalle { padding-top: 1rem; }

/* ---------- Hero de Nosotros (centrado, con más presencia que el genérico) ---------- */
.nosotros-hero-caption {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.25rem 0.5rem;
}

.nosotros-hero-caption h1 {
    font-size: 2.2rem;
    color: var(--color-teal-dark);
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
    opacity: 0;
    animation: nosotros-hero-entrada 0.6s ease-out 0.1s both;
}
.nosotros-hero-caption h1::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FA084' stroke-width='1.8'%3E%3Cpath d='M12 5c-1.5-1.5-3.5-2-5-1.5C4 4.2 3 6 3 8.5c0 2 .5 3.5 1 5.5s1 4 2.5 4c1.2 0 1.3-1.5 1.7-3 .3-1.2.7-2.5 1.8-2.5s1.5 1.3 1.8 2.5c.4 1.5.5 3 1.7 3 1.5 0 2-2 2.5-4s1-3.5 1-5.5c0-2.5-1-4.3-4-4.5-1.5-.5-3.5 0-5 1.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: nosotros-diente-flotar 3s ease-in-out infinite;
}
.nosotros-hero-caption h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    background: var(--color-rosa);
    border-radius: 4px;
    animation: nosotros-linea-crecer 0.5s ease-out 0.6s both;
}

.nosotros-hero-caption .hero-subtitle {
    font-size: 1.1rem;
    margin-top: 1rem;
    color: var(--color-texto-suave);
    opacity: 0;
    animation: nosotros-hero-entrada 0.6s ease-out 0.4s both;
}

@keyframes nosotros-hero-entrada {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nosotros-linea-crecer {
    from { width: 0; opacity: 0; }
    to { width: 64px; opacity: 1; }
}

@keyframes nosotros-diente-flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.servicio-galeria { background: var(--color-fondo-suave); }

.galeria-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}
.galeria-grid img {
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    height: 220px;
    width: 100%;
    object-fit: cover;
}

.otros-servicios { background: #fff; }

/* ---------- Índice de servicios (/servicios/) ---------- */
.servicios-index-hero {
    background: var(--color-fondo-suave);
    padding: 2.5rem 0;
    text-align: center;
}

.cards-grid-servicios { grid-template-columns: 1fr; }

.servicio-card-img {
    display: block;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--sombra);
    border: 1px solid var(--color-borde);
    transition: transform 0.2s ease;
}
.servicio-card-img:hover { transform: translateY(-4px); }

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

.servicio-card-img-caption { padding: 1rem; }
.servicio-card-img-caption h3 { color: var(--color-teal-dark); margin-bottom: 0.4rem; }
.servicio-card-img-caption .card-link { color: var(--color-rosa); font-weight: 600; font-size: 0.9rem; }

/* ---------- Formularios (contacto / agenda) ---------- */
.form-contacto, .form-agenda-wrapper { max-width: 560px; margin: 0 auto; }

.form-grupo { margin-bottom: 1rem; }
.form-grupo label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--color-texto);
}
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-family: var(--font-base);
    font-size: 0.95rem;
    color: var(--color-texto);
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    outline: none;
    border-color: var(--color-teal);
}

.agenda-alternativa {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-borde);
}
.agenda-alternativa p { margin-bottom: 0.75rem; }

.mapa-placeholder {
    background: var(--color-fondo-suave);
    border: 1px dashed var(--color-borde);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
}

.mapa-embed { position: relative; }
.mapa-embed iframe { width: 100%; aspect-ratio: 4 / 3; height: auto; }

/* ---------- Página de Contacto ---------- */
.contacto-info-section { padding-top: 1rem; }

.contacto-fade-in { opacity: 0; animation: nosotros-hero-entrada 0.6s ease-out both; }
.contacto-fade-in-delay { animation-delay: 0.15s; }

.contacto-form-titulo {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2rem;
}
.contacto-form-titulo h2 {
    color: var(--color-teal-dark);
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
}
.contacto-form-titulo h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 4px;
    background: var(--color-rosa);
    border-radius: 4px;
}

/* ---------- Pasos del proceso (Agenda tu Cita) ---------- */
.agenda-pasos { background: var(--color-fondo-suave); }

.pasos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.paso-item {
    text-align: center;
    padding: 1rem;
    opacity: 0;
    animation: nosotros-hero-entrada 0.6s ease-out both;
}
.paso-item:nth-child(1) { animation-delay: 0.1s; }
.paso-item:nth-child(2) { animation-delay: 0.25s; }
.paso-item:nth-child(3) { animation-delay: 0.4s; }

.paso-numero {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-teal);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

.paso-item h3 { color: var(--color-teal-dark); margin-bottom: 0.4rem; font-size: 1.05rem; }
.paso-item p { font-size: 0.9rem; }

/* El formulario ya usa .servicio-detalle-texto — ajustar ancho máximo para legibilidad */
.servicio-detalle-texto .form-contacto { max-width: 100%; margin: 0; }

.agenda-img-sticky img {
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

/* ---------- FAQ (acordeón nativo con <details>) ---------- */
.faq-lista { max-width: 720px; margin: 0 auto; }

.faq-item {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    opacity: 0;
    animation: nosotros-hero-entrada 0.5s ease-out both;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-item:hover { box-shadow: var(--sombra); border-color: var(--color-teal); }
.faq-item[open] { border-color: var(--color-teal); }

.faq-item summary {
    font-weight: 600;
    cursor: pointer;
    color: var(--color-teal-dark);
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    content: "+ ";
    color: var(--color-rosa);
    font-weight: 700;
    display: inline-block;
    transition: transform 0.25s ease;
}
.faq-item[open] summary::before { content: "+ "; transform: rotate(45deg); }

.faq-item p {
    margin-top: 0.75rem;
    animation: nosotros-hero-entrada 0.25s ease-out both;
}

/* ---------- Alertas de formulario ---------- */
.alerta {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
.alerta-exito {
    background: #e6f7f1;
    border: 1px solid var(--color-teal);
    color: var(--color-teal-dark);
}
.alerta-error {
    background: #fdeaef;
    border: 1px solid var(--color-rosa);
    color: var(--color-rosa-dark);
}

/* ==========================================================================
   TABLET Y DESKTOP (mobile-first: se agranda desde acá)
   ========================================================================== */
@media (min-width: 768px) {
    h1 { font-size: 2.4rem; }
    h2 { font-size: 1.9rem; }

    /* Esta sección siempre tiene 3 tarjetas — evitar que herede el grid de
       4 columnas del breakpoint desktop. Movido aquí (dentro del media
       query) porque como regla !important global rompía el layout en
       mobile, forzando 3 columnas apretadas en pantallas angostas. */
    .por-que-elegirnos-texto .cards-grid { grid-template-columns: repeat(3, 1fr) !important; }

    .main-nav {
        width: auto;
        order: 2;
        max-height: none;
        overflow: visible;
        flex: 1;
        display: flex;
        justify-content: center;
    }
    .main-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1.75rem;
        justify-content: center;
    }
    .main-nav > ul > li { width: auto; }
    .main-nav > ul > li > a { padding: 0.5rem 0.85rem; border-radius: 8px; }

    .nav-social {
        margin-left: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        padding: 0;
        border-left: 1px solid var(--color-borde);
        padding-left: 1.25rem;
    }
    .nav-social a {
        padding: 0.4rem;
    }
    .nav-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--color-texto-suave);
    }
    .nav-social a:hover { color: var(--color-rosa); }
    .nav-social a svg { width: 24px; height: 24px; }

    .has-dropdown .dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        border: 1px solid var(--color-borde);
        border-radius: var(--radius);
        box-shadow: var(--sombra);
        min-width: 240px;
        padding: 0.5rem 0;
    }
    .has-dropdown .dropdown a { padding-left: 1rem; font-weight: 500; }
    .has-dropdown > .nav-no-link::after { display: none; }
    .has-dropdown:hover .dropdown,
    .has-dropdown:focus-within .dropdown { display: block; }

    .menu-toggle { display: none; }

    .hero-inner { flex-direction: row; text-align: left; }
    .hero-text { flex: 1; }
    .hero-image { flex: 1; }
    .hero-cta { flex-direction: row; }

    .cards-grid { grid-template-columns: repeat(2, 1fr); }

    .footer-inner { grid-template-columns: repeat(4, 1fr); }

    .servicio-hero-img { height: 380px; }
    .servicio-hero-caption { text-align: left; max-width: 640px; }

    .nosotros-hero-caption h1 { font-size: 2.8rem; }
    .nosotros-hero-caption .hero-subtitle { font-size: 1.2rem; }

    .servicio-detalle-grid { grid-template-columns: 1.1fr 0.9fr; }

    .por-que-elegirnos-grid { grid-template-columns: 0.7fr 1.3fr; }
    .por-que-elegirnos-img img { height: 100%; }

    .galeria-grid { grid-template-columns: repeat(3, 1fr); }

    .cards-grid-servicios { grid-template-columns: repeat(2, 1fr); }

    .pasos-grid { grid-template-columns: repeat(3, 1fr); }
    .agenda-img-sticky { position: sticky; top: 100px; align-self: start; }
}

@media (min-width: 640px) {
    .carrusel-track .carrusel-item { flex: 0 0 calc(50% - 0.625rem) !important; max-width: calc(50% - 0.625rem); }
}

@media (min-width: 1024px) {
    .cards-grid { grid-template-columns: repeat(4, 1fr); }
    .cards-grid-servicios { grid-template-columns: repeat(3, 1fr); }

    .carrusel-track .carrusel-item { flex: 0 0 calc(25% - 0.94rem) !important; max-width: calc(25% - 0.94rem); }
}