/*
 *
 *  * EENDA
 *  * Marketing, Desarrollo & Consulting
 *  * www.eenda.com
 *  * © 2026
 *
 */

/* =========================================================================
   Ocean Clinik — Responsive (alcance: header + hero + footer)
   Breakpoints alineados con Bootstrap 5 (max-width).
   ========================================================================= */

@media (min-width: 1400px){ /* XXL */

}

@media (max-width: 1199px){ /* LG */
	/* En pantallas medianas, los enlaces pasan al menú móvil (offcanvas);
	   se conservan logo centrado + idioma + hamburguesa. */
	.oc-nav--left .oc-nav__link,
	.oc-nav--left .oc-nav__pill { display: none; }
	.oc-nav--right .oc-nav__link { display: none; }
	.oc-header__cta { display: none; }
	/* Header de área: la navegación de la vertical y el selector pasan al offcanvas. */
	.oc-areanav,
	.oc-areaswitch { display: none; }
	.oc-burger { display: inline-flex; }
	/* Colapsado quedan 3 elementos: burger (izq) · logo (centro) · idioma (dcha).
	   space-between empuja burger e idioma a los extremos; el logo se centra de forma
	   absoluta para que quede EXACTO (burger e idioma tienen anchos distintos). */
	.oc-header__bar--area { position: relative; justify-content: space-between; gap: 12px; }
	.oc-header__bar--area .oc-brand--area {
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
	}
}

@media (max-width: 991px){ /* MD (tablet) */
	.oc-hero__content { max-width: 100%; }

	/* Ritmo vertical de tablet (DESIGN §11) */
	.oc-section { padding: 90px 0; }
	.oc-section-head { margin-bottom: 44px; }

	/*
	 * Selector de áreas: a partir de aquí la banda diagonal se apila. Tres paneles
	 * inclinados a <300px cada uno quedarían ilegibles; apilados son bandas de
	 * color full-width. Se desactiva el skew (paneles y contenido) y el hover
	 * expansivo, que no tiene sentido en táctil.
	 */
	.oc-split-section { padding-bottom: 0; }
	.oc-split { flex-direction: column; width: 100%; margin-left: 0; min-height: 0; --oc-slant: 0px; }
	/* Se desmonta la diagonal: sin clip-path (bandas rectangulares), sin solape y
	   sin el hover expansivo (no aplica en táctil). El first/last-child llevan su
	   propio clip-path, así que hay que anularlo también en ellos. */
	.oc-split__panel,
	.oc-split__panel:first-child,
	.oc-split__panel:last-child { clip-path: none; margin-left: 0; flex: none; }
	.oc-split:hover .oc-split__panel,
	.oc-split__panel:hover,
	.oc-split__panel:focus-within { flex-grow: 0; }
	.oc-split__inner,
	.oc-split__panel:first-child .oc-split__inner { margin: 0; max-width: 620px; padding: 48px 40px; }
	/* Banda-índice de /equipo (.oc-split--idx): apilada, cada área es una barra baja. */
	.oc-split--idx .oc-split__inner,
	.oc-split--idx .oc-split__panel:first-child .oc-split__inner { max-width: none; padding: 18px 24px; }
	.oc-split--idx:hover .oc-split__panel,
	.oc-split--idx .oc-split__panel:hover,
	.oc-split--idx .oc-split__panel:focus-within { flex-grow: 0; }

	/*
	 * Filosofía: en táctil no se fija ni se abre con el scroll (el pin de 220vh es
	 * frágil con la barra de direcciones del móvil). El vídeo se muestra en un marco
	 * estático a lo ancho, con relación de aspecto fija.
	 */
	.oc-filo { padding-top: 90px; }
	.oc-filo__track { height: auto; margin-top: 40px; }
	.oc-filo__stage { position: static; height: auto; }
	.oc-filo__media { clip-path: none; height: auto; aspect-ratio: 4 / 3; }
	.oc-filo__intro .oc-lead { font-size: 19px; }

	/* Internacional (diagonal): se apila. La imagen pasa arriba SIN diagonal (a
	   <300px de ancho el corte se comería la foto) y el contenido debajo. */
	.oc-intl { grid-template-columns: 1fr; }
	.oc-intl__media > img { min-height: 320px; clip-path: none; }
	.oc-intl__body { padding: 56px 30px; }
	.oc-intl__features { grid-template-columns: 1fr 1fr; gap: 22px 26px; }

	/* FAQ: una columna (intro arriba, acordeón debajo). */
	.oc-faq__grid { grid-template-columns: 1fr; gap: 36px; }

	/* Financiación: la tira se apila (intro + CTA arriba, puntos debajo). */
	.oc-fin__card { grid-template-columns: 1fr; gap: 30px; padding: 34px 30px; }

	/* CTA de cierre: se apila (titular arriba, canales debajo). El fondo sigue full-width. */
	.oc-cta__grid { grid-template-columns: 1fr; gap: 32px; }

	/* Urgencias: se apila (titular arriba, botones debajo). */
	.oc-urg__grid { grid-template-columns: 1fr; gap: 28px; }

	/* Blog: destacado arriba, lista de áreas debajo (una columna). */
	.oc-blog__grid { grid-template-columns: 1fr; gap: 22px; }
	.oc-blog__feat { min-height: 440px; }
	.oc-blog__item { min-height: 200px; }

	/* Sedes: de 3 a 2 columnas (la tercera pasa debajo). */
	.oc-sedes__grid > * { flex-basis: calc((100% - 18px) / 2); }
	/* Contacto: tarjetas de clínica de 3 a 2 columnas. */
	.oc-clinics > * { flex-basis: calc((100% - 22px) / 2); }
	/* Blog (página): destacado apilado y rejilla a 2 columnas. */
	.oc-blogp__feat { grid-template-columns: 1fr; }
	.oc-blogp__grid { grid-template-columns: 1fr 1fr; }
	/* Detalle de artículo: una sola columna; se oculta el índice lateral (el CTA de
	   cita ya lo cubre la barra fija móvil y el "compartir" está también al pie). */
	.oc-post--toc .oc-post__body { grid-template-columns: 1fr; max-width: 720px; }
	.oc-post__aside { display: none; }
	/* Legales: una columna; la navegación entre documentos pasa arriba en horizontal. */
	.oc-legal__body { grid-template-columns: 1fr; gap: 26px; }
	.oc-legal__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
	.oc-legal__nav-h { width: 100%; margin-bottom: 4px; }
	.oc-legal__nav a { border-left: none; border: 1px solid rgba(31, 41, 51, .12); }
	/* Panel de sede: el aside pasa debajo (deja de ser pegajoso) y el equipo a 3 col. */
	.oc-sededetail__body { grid-template-columns: 1fr; gap: 34px; }
	.oc-sededetail__aside { position: static; }
	.oc-sededetail__team { grid-template-columns: repeat(2, minmax(0, 240px)); }
	/* Modal de perfil: la foto pasa arriba (más compacta) y el texto debajo. */
	.oc-memmodal__grid { grid-template-columns: 1fr; gap: 22px; }
	.oc-memmodal__photo { max-width: 200px; aspect-ratio: 1 / 1; }

	/* Tratamientos (área): de 3 a 2 columnas. */
	.oc-treat__grid { grid-template-columns: 1fr 1fr; }
	/* ¿Qué te pasa?: pregunta y lista se apilan; en la ficha, texto y aside también (sin sticky). */
	.oc-probs__grid { grid-template-columns: 1fr; gap: 32px; }
	.oc-probs__ask, .oc-pb__aside { position: static; }
	.oc-pb__grid { grid-template-columns: 1fr; gap: 34px; }
	.oc-pb__wm { display: none; }

	/* Detalle de tratamiento: el hero se apila (imagen debajo del texto). */
	.oc-tphero__grid { grid-template-columns: 1fr; gap: 34px; }
	.oc-tphero__media img { max-height: 380px; }

	/* Tecnología (media boxed): se apila — la tarjeta deja de ser sticky y pasa arriba;
	   los items se ven todos (sin el revelado por scroll). */
	.oc-tsticky__grid { grid-template-columns: 1fr; gap: 30px; padding: 0 26px; }
	.oc-tsticky__media { position: relative; top: auto; height: auto; }
	.oc-tsticky__frame { height: 48vh; }
	.oc-tsticky__side { padding: 8px 4px 44px; }
	.oc-tsticky__item { min-height: auto; padding: 26px 0; opacity: 1; }
	.oc-tsticky__item .oc-tsticky__bar { width: 90px; }

	/* Footer: la marca pasa a lo ancho arriba; Contacto y Sedes quedan al lado. */
	.oc-footer__top { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
	.oc-footer__brand { grid-column: 1 / -1; }
}

@media screen and (max-width: 767px){ /* SM (mobile) */
	:root { --header-h: 72px; }
	body.front-end { font-size: 16px; padding-bottom: 76px; } /* espacio barra fija */
	.oc-logo { height: 42px; }
	.oc-h1 { font-size: 40px; line-height: 1.06; }
	.oc-hero { text-align: center; }
	.oc-hero .oc-eyebrow { justify-content: center; }
	.oc-hero__actions { justify-content: center; }
	.oc-mobile-cta { display: grid; }
	/* Tratamientos (área): una tarjeta por fila; urgencias apilado. */
	.oc-treat__grid { grid-template-columns: 1fr; }
	/* Proceso: en móvil NO se fija (main.js) — carrusel horizontal deslizable. Se
	   compactan la etiqueta y las tarjetas para que quepan bien. */
	.oc-hproc__sticky { padding: 70px 0; }
	.oc-hproc__step { width: 82vw; max-width: 360px; }
	.oc-hproc__label { font-size: 22px; }
	.oc-hproc__title { font-size: 22px; }
	/* Carrusel tipo slides: se quita el padding lateral del viewport y se añade lead/
	   trail a la pista para que el primer y el último paso también puedan centrarse
	   (con un pequeño peek del contiguo). La activación del centrado la hace main.js. */
	.oc-hproc:not(.is-pinned) .oc-hproc__viewport { padding-left: 0; padding-right: 0; }
	.oc-hproc:not(.is-pinned) .oc-hproc__track { padding-inline: 9vw; gap: 18px; }
	/* Sedes: una tarjeta por fila y cabecera del diálogo más compacta. */
	.oc-sedes__grid > * { flex-basis: 100%; }
	/* Contacto: una tarjeta de clínica por fila. */
	.oc-clinics > * { flex-basis: 100%; }
	/* Blog (página): una columna; barra apilada (buscador full-width). */
	.oc-blogp__grid { grid-template-columns: 1fr; }
	.oc-blogp__bar { flex-direction: column; align-items: stretch; }
	.oc-blogp__search { max-width: none; }
	.oc-blogp__feat-ph { min-height: 220px; }
	/* Se conserva el hueco superior de la foto (padding-top), solo se ajustan los lados. */
	.oc-sede { padding: 140px 22px 22px; }
	.oc-sede__name { font-size: 24px; }
	/* Panel de sede: equipo a 2 tarjetas por fila (rellenan el ancho) y hero más bajo. */
	.oc-sededetail__team { grid-template-columns: repeat(2, 1fr); }
	.oc-sededetail__hero { min-height: 260px; }

	/* Footer: todo en una columna; barra inferior centrada. */
	.oc-footer__top { grid-template-columns: 1fr; gap: 36px; }
	.oc-footer__bottom { justify-content: center; text-align: center; }
	.oc-footer__totop { display: none; }

	/* Ritmo vertical de móvil (DESIGN §11) */
	.oc-section { padding: 70px 0; }

	/* Banda de áreas apilada: paneles algo más compactos */
	.oc-split__inner { padding: 40px 28px; }
	.oc-split__icon { width: 54px; height: 54px; margin-bottom: 20px; }
	.oc-split__icon i { font-size: 25px; }
	.oc-split__title { font-size: 24px; }

	/* Internacional: ventajas en una columna; tarjeta de idiomas más ajustada. */
	.oc-intl__features { grid-template-columns: 1fr; gap: 22px; }
	.oc-intl__langs { left: 14px; right: 14px; bottom: 14px; padding: 12px 14px; }
	.oc-intl__flags { margin-left: auto; }

	/* Reseñas: tarjetas y media algo más compactas. */
	.oc-rev__card { width: 290px; padding: 22px 22px 20px; }
	.oc-rev__score-num { font-size: 44px; }

	/* FAQ: pregunta un poco más pequeña. */
	.oc-faq__q { font-size: 16.5px; padding: 20px 4px; }
	.oc-faq__a { font-size: 15.5px; padding-bottom: 22px; }
	.oc-faq__contact { max-width: 460px; }

	/* Blog: cabecera apilada (título + enlace debajo) y destacado más compacto. */
	.oc-blog__head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.oc-blog__feat { min-height: 400px; }
	.oc-blog__feat .oc-blog__card-title { font-size: 25px; }
}

@media screen and (max-width: 576px){ /* XS */
	/* ¿Qué te pasa?: filas compactas; el texto del enlace se oculta y queda la flecha. */
	.oc-prob { gap: 14px; padding: 18px 4px; }
	.oc-prob:hover { padding-left: 4px; }
	.oc-prob__ic { width: 48px; height: 48px; border-radius: 14px; }
	.oc-prob__ic svg { width: 28px; height: 28px; }
	.oc-prob__q { font-size: 20px; }
	.oc-prob__go span { display: none; }
	.oc-hero__actions .btn-ocean-light,
	.oc-hero__actions .btn-ocean-ghost { width: 100%; }
}