/* ==========================================================================
   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; }

/* Corrige el header que sube y baja sin parar al hacer scroll. main.js ya
   usa histeresis (activa is-scrolled a 80px, la quita a 40px), pero al
   activarse el header pierde ~90px de alto (header-top colapsa + logo y
   paddings se achican) -- mas que el margen de esa histeresis (40px). Como
   el header es sticky, ese cambio de alto ocurre "arriba" del contenido ya
   scrolleado, y el navegador aplica scroll anchoring: reajusta scrollY
   automaticamente para que la pagina no "salte". Ese reajuste cruza el
   umbral contrario, dispara el toggle opuesto, y asi se repite en bucle
   infinito. overflow-anchor: none apaga ese reajuste automatico, asi que
   encoger/agrandar el header deja de alterar scrollY por si solo. */
html, body { overflow-anchor: none; }

/* Salvaguarda: evita scroll horizontal accidental en mobile si algún
   elemento se desborda del viewport (imágenes, carrusel, etc.)
   Nota: usar "clip" y no "hidden" — overflow-x:hidden en html/body rompe
   position:sticky en cualquier descendiente (ej. .site-header), porque
   crea un contenedor de scroll nuevo. "clip" evita el overflow horizontal
   sin ese efecto secundario y es el causante de que el header dejara de
   quedarse fijo al hacer scroll. */
html, body { max-width: 100%; overflow-x: clip; }

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) — se colapsa al hacer
   scroll (ver .site-header.is-scrolled más abajo), el resto del header
   permanece fijo (position: sticky) durante toda la navegación. */
.header-top {
    background: var(--color-fondo-suave);
    border-bottom: 1px solid var(--color-borde);
    font-size: 0.8rem;
    max-height: 120px;
    overflow: hidden;
    transition: max-height 0.25s ease, border-color 0.25s ease;
}
.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;
    transition: padding 0.25s ease;
}
.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, y se oculta la barra de
   teléfono/correo — solo queda la fila de logo + navegación */
.site-header.is-scrolled .header-inner { padding: 0.5rem 1.25rem; }
.site-header.is-scrolled .logo { height: 44px; }
.site-header.is-scrolled .header-top {
    max-height: 0;
    border-bottom-color: transparent;
}
.site-header.is-scrolled .header-top-inner {
    padding-top: 0;
    padding-bottom: 0;
}

/* ---------- 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); }

/* Mismo problema que en .seccion-confianza: el `p { color: var(--color-texto-suave) }`
   global (linea 61) pisa el color claro heredado de .site-footer en cualquier <p>
   (tagline del logo, direccion, telefono, horario), dejando texto gris oscuro
   sobre fondo oscuro. Se fija explicitamente aqui. */
.site-footer p { color: #cfd8d5; }

.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;
}

/* Idem para el copyright del footer-bottom si va envuelto en un <p>. */
.footer-bottom p { 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); }

/* ---------- Tarjetas de equipo en "Nuestro equipo" (nosotros.php) ----------
   auto-fit + minmax: con 1 sola tarjeta, ocupa un ancho fijo y queda
   alineada a la izquierda (no se estira ni deja un hueco vacío al lado).
   Al agregar más doctoras, se acomodan solas en fila. */
.equipo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    gap: 2rem;
    margin-top: 1.5rem;
}
.equipo-card-img {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    overflow: hidden;
}
.equipo-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.equipo-card-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem 1rem 0.9rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.equipo-card-caption strong { font-size: 1.05rem; }
.equipo-card-caption span { font-size: 0.82rem; opacity: 0.9; }
.equipo-card-bio {
    margin-top: 0.9rem;
    color: var(--color-texto-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); }
}