/* =========================================================
   Óptica La Curacao — Ajustes responsivos
   ========================================================= */

/* ---------- La barra de navegación no cabe entera ----------
   Con ocho ítems, el menú mide 902px y la píldora de Sale 292: 1194 en total.
   La fila sólo los tiene por encima de ~1274px de ventana, así que por debajo
   la píldora se caía a una segunda línea.

   Se ataca en dos tramos:

   1. Entre 1200 y 1340 se aprieta la separación del menú de 36 a 20px. Eso
      baja el menú a ~790px y el conjunto a 1082, que sí cabe. Dos clases para
      ganarle a la hoja de layout del núcleo, que fija el `gap` desde el
      blockGap del bloque.
   2. Por debajo de 1200 ya no hay ancho posible sin dejar el texto ilegible
      —ni bajando la fuente a 11px y la separación a 12px se llega—, así que
      toma el relevo el menú de hamburguesa, que lleva los diez enlaces.

   El corte estaba en 900, subió a 1200 con ocho ítems más la píldora de
   Sale (1194px) y volvió a 900 al dejar el menú en cinco ítems sin píldora:
   la fila mide 514px y cabe holgada en los ~820px que quedan a 901px. */
@media (max-width: 1340px) {
	.oc-header .oc-nav {
		gap: 20px;
	}
}

/* ---------- Cabecera compacta (<= 900px) ----------
   Se esconde la fila de enlaces y toma el relevo la hamburguesa
   (`.oc-header__actions` deja de estar posicionado y cae en el flex de la
   fila del logo). El botón «Haz tu cita» también se esconde aquí, más abajo:
   en esta franja ya no cabe junto al logo y la hamburguesa. */
@media (max-width: 900px) {
	.oc-header__nav {
		display: none !important;
	}

	.oc-header .oc-mobile-nav {
		display: block;
	}

	/* La cabecera es más baja sin la fila de navegación (~68px medidos). */
	.oc-wizard {
		scroll-margin-top: 84px;
	}
}

/* ---------- Tablet y menos (<= 900px) ---------- */
@media (max-width: 900px) {
	body,
	.wp-site-blocks,
	.has-global-padding {
		--wp--style--root--padding-left: 18px;
		--wp--style--root--padding-right: 18px;
	}

	/* Aquí el botón de cita ya no cabe junto al logo y la hamburguesa. */
	.oc-cita-wrap {
		display: none !important;
	}

	/* Tagline junto al logo: se oculta para ganar espacio. */
	.oc-logo__divider,
	.oc-logo__tagline {
		display: none;
	}

	/* Iconos de confianza: envuelven en filas. */
	.oc-trust__grid {
		flex-wrap: wrap;
		justify-content: center;
		gap: 30px 16px;
	}

	.oc-trust__item {
		flex: 0 0 28%;
	}

	/* Testimonios: como mucho dos tarjetas por vista (una si el bloque pide una). */
	.oc-testi {
		flex: 0 0 calc((100% - (min(var(--oc-testi-por-vista, 3), 2) - 1) * 26px) / min(var(--oc-testi-por-vista, 3), 2));
	}
}

/* ---------- Móvil (<= 600px) ---------- */
@media (max-width: 600px) {
	.oc-trust__item {
		flex: 0 0 44%;
	}


	.oc-btn-teal-lg .wp-block-button__link {
		font-size: 21px;
		padding: 14px 42px;
	}

	.oc-btn-haz .wp-block-button__link {
		font-size: 18px;
		padding: 13px 36px;
	}

	.oc-steps {
		max-width: 340px;
	}

	.oc-steps::before {
		left: 34px;
		right: 34px;
	}

	.oc-step__circle img {
		width: 52px;
		height: 52px;
	}

	.oc-step__label {
		font-size: 14px;
	}

	/* Testimonios: una tarjeta por vista y flechas más pegadas al borde. */
	.oc-testi-carousel {
		padding: 0 30px;
	}

	.oc-testi {
		flex: 0 0 100%;
	}

	.oc-testi-nav .oc-slider-nav__flecha {
		width: 28px;
	}

	.oc-footer__nav {
		margin-bottom: 20px;
		padding-bottom: 18px;
	}

	.oc-footer-nav {
		gap: 14px 18px;
	}

	.oc-footer__row {
		flex-direction: column;
		gap: 18px;
		text-align: center;
	}
}