/* ==========================================================================
   RESPONSIVE — Todos los ajustes por tamaño de pantalla, en un solo lugar
   Catalina Casa de Té — https://mktactual.com/

   Esta hoja se carga la ÚLTIMA, así que lo que se escriba aquí gana sobre
   el resto del CSS del tema.

   Los cortes que usamos:
     1280px  Escritorio chico / laptop
     1024px  Tablet horizontal  ← aquí aparece el menú lateral
      900px  Tablet vertical
      768px  Móvil grande
      600px  Móvil
      480px  Móvil chico
   ========================================================================== */

/* ==========================================================================
   REGLA DE ORO: nada se sale de la pantalla a lo ancho
   ========================================================================== */

html,
body {
  max-width: 100%;

  /*
   * OJO — no cambiar 'clip' por 'hidden'.
   *
   * 'overflow-x: hidden' convierte al body en un contenedor de scroll, y eso
   * ROMPE 'position: sticky' en todo lo que lleva dentro: el encabezado dejaba
   * de quedarse pegado al bajar por la página, en móvil y en escritorio.
   *
   * 'clip' recorta exactamente igual lo que se salga a lo ancho, pero sin
   * crear ese contenedor, así que el encabezado sigue funcionando.
   *
   * La primera línea es el respaldo para navegadores muy antiguos que no
   * entienden 'clip'; los que sí lo entienden usan la segunda.
   */
  overflow-x: hidden;
  overflow-x: clip;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Las tablas y bloques de código se desplazan dentro de su propia caja,
   nunca empujan la página entera. */
.catalina table,
.catalina-woo-contenido table,
.woocommerce table.shop_table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Las palabras muy largas (correos, URLs) se parten en lugar de desbordar */
.catalina p,
.catalina h1,
.catalina h2,
.catalina h3,
.catalina li,
.catalina a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   1280px — Escritorio chico
   ========================================================================== */

@media (max-width: 1280px) {
  .catalina-header-inner {
    padding-left: 20px;
    padding-right: 20px;
    gap: 16px;
  }

  .catalina-menu > li > a {
    padding: 10px 10px;
    font-size: 0.8rem;
  }

  .catalina-menu > li.nav-cta > a {
    padding: 10px 16px;
  }
}

/* ==========================================================================
   1024px — Aquí entra el menú lateral
   ========================================================================== */

/* ==========================================================================
   ENCABEZADO — holgura del menú

   El menú del encabezado se administra desde Apariencia → Menús. Con las
   entradas actuales (Talleres, Tienda, Nosotras, Blog, Contacto y el botón)
   cabe de sobra. Estas reglas solo dan un respiro si algún día se le añaden
   más entradas o con nombres largos, para que no acabe pisando el logo.
   ========================================================================== */

/*
 * El menú tiene NUEVE entradas de primer nivel desde que la clienta sacó
 * Eventos Corporativos del submenú y recuperó Matcha y el Quiz. Para que
 * quepan sin pisar el logo, el carril se aprieta por tramos y la hamburguesa
 * entra antes que antes (a 1200 en vez de a 1024).
 */
@media (min-width: 1241px) {
  .catalina-header-inner {
    gap: 12px;
  }

  .catalina-menu {
    /* Solo se aprieta el aire lateral: el subrayado lo sigue solo. */
    --catalina-menu-px: 10px;
    gap: 0;
  }

  .catalina-menu > li > a {
    font-size: 0.79rem;
    letter-spacing: 0.2px;
  }

  .catalina-menu > li.nav-cta {
    margin-left: 10px;
  }

  /* El logo y los iconos nunca se dejan aplastar por el menú. */
  .catalina-logo,
  .catalina-acciones {
    flex: 0 0 auto;
  }
}

/*
 * Justo antes de que entre la hamburguesa el carril se queda sin holgura y el
 * botón «Reservar Taller» acaba pegado a la píldora del quiz. Ahí la píldora
 * se queda solo con su icono: el quiz no se pierde, y a partir de 1321 vuelve
 * a leerse «Tu taza ideal».
 */
@media (min-width: 1241px) and (max-width: 1320px) {
  .catalina-accion-quiz .catalina-accion-etiqueta {
    display: none;
  }
}

@media (max-width: 1240px) {
  /* El menú horizontal se va, aparece la hamburguesa */
  .catalina-nav-escritorio {
    display: none;
  }

  .catalina-hamburguesa {
    display: block;
  }

  /* El logo se va a la izquierda y los iconos a la derecha */
  .catalina-header-inner {
    justify-content: space-between;
    gap: 12px;
  }

  .catalina-logo {
    margin-right: auto;
  }

  .catalina-logo img,
  .catalina-logo .custom-logo {
    height: 50px;
  }

  .catalina-header.esta-encogido .catalina-logo img {
    height: 42px;
  }

  /* Rejillas de 4 columnas pasan a 3.

     OJO con `.catalina-products .products-grid`: la rejilla de productos de la
     portada se define en secciones.css con DOS clases, así que un
     `.products-grid` suelto (una clase) pierde y no se aplica nunca. Hay que
     repetir el selector completo en cada corte. */
  .workshops-grid,
  .products-grid,
  .catalina-products .products-grid,
  .talleres-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   900px — Tablet vertical
   ========================================================================== */

@media (max-width: 900px) {
  /* Secciones a dos columnas pasan a una sola */
  .about-inner,
  .talleres-info-inner,
  .corporativos-inner,
  .catalina-footer-grid {
    grid-template-columns: 1fr;
  }

  .workshops-grid,
  .products-grid,
  .catalina-products .products-grid,
  .talleres-container,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* El pie de página se centra */
  .catalina-footer-grid {
    gap: 32px;
    text-align: left;
  }
}

/* ==========================================================================
   768px — Móvil grande
   ========================================================================== */

@media (max-width: 768px) {
  /* ---- Tipografía: los títulos dejan de ser gigantes ----
     El titular del slider NO va aquí: lo dimensiona slider.css. */
  .talleres-hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.6rem);
    line-height: 1.15;
  }

  .catalina h2,
  .section-header h2 {
    font-size: clamp(1.55rem, 6vw, 2.1rem);
  }

  .catalina h3 {
    font-size: 1.2rem;
  }

  /* ---- Espaciado de secciones ----
     OJO: esta regla NO puede tocar las secciones a sangre completa (el
     slider, la barra de cifras, el pie…). Esas ocupan el 100% del ancho y,
     si se les añade relleno lateral, acaban midiendo 100% + 36px: la página
     se vuelve más ancha que la pantalla y todo el contenido se desplaza y
     se corta por la derecha.

     Por eso se excluyen expresamente y se fuerza el modelo de caja que
     incluye el relleno dentro del ancho. */
  .catalina section {
    box-sizing: border-box;
  }

  .catalina section:not(.catalina-hero):not(.catalina-stats-bar):not(.tienda-hero):not(.tienda-categorias):not(.tienda-cta-talleres):not(.catalina-single-talleres):not(.talleres-hero) {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* ---- Rejillas a una columna ----
     Los talleres NO van aquí: en móvil se convierten en carrusel deslizable
     y de eso se encarga carrusel.css. Si se añaden a esta lista, esta hoja
     se carga después y les devuelve el display de rejilla, rompiéndolo. */
  .testimonials-grid,
  .info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* La tienda y los productos de la portada mantienen dos columnas: se ven
     mejor que una sola. El segundo selector es obligatorio — ver la nota del
     corte de 1024px. */
  .products-grid,
  .catalina-products .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-left: 0;
    padding-right: 0;
  }

  /* ---- Tarjeta de producto en dos columnas ----
     Con la mitad de ancho, los textos hay que apretarlos o se descuadra
     todo: el nombre a dos líneas, el botón a todo el ancho de la tarjeta
     y las mayúsculas de la categoría más pequeñas. */
  .catalina-product-card .product-info {
    padding: 12px 12px 14px;
  }

  .catalina-product-card .product-type {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
  }

  .catalina-product-card .product-name {
    font-size: 0.92rem;
    line-height: 1.28;
    margin-bottom: 8px;
    min-height: 2.4em;
  }

  .catalina-product-card .product-price {
    font-size: 1.02rem;
    margin-bottom: 10px;
  }

  .catalina-product-card .product-cta {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    min-height: 40px;
  }

  /* ---- Barra de beneficios ---- */
  .catalina-beneficio {
    font-size: 0.72rem;
  }

  /* ---- Panel lateral a casi toda la pantalla ---- */
  .catalina-panel {
    width: min(380px, 92vw);
  }

  /* ---- El botón flotante de WhatsApp se hace más discreto ---- */
  .catalina-whatsapp-flotante {
    width: 52px;
    height: 52px;
    bottom: calc(var(--catalina-barra-alto) + 14px); /* Deja sitio a la barra fija */
  }

  .catalina-whatsapp-flotante .whatsapp-globo {
    display: none;
  }

  /* ---- La barra fija de reserva aparece ----
     En flex, no en bloque: así el texto queda centrado y no se le echan encima
     los botones flotantes de las esquinas. */
  .catalina-barra-fija {
    display: flex;
  }

  /* Y el pie deja hueco para que no tape nada */
  .catalina-con-barra .catalina-footer {
    padding-bottom: calc(var(--catalina-barra-alto) + 24px);
  }
}

/* ==========================================================================
   600px — Móvil
   ========================================================================== */

@media (max-width: 600px) {
  .catalina-header-inner {
    padding: 10px 14px;
  }

  .catalina-logo img,
  .catalina-logo .custom-logo {
    height: 42px;
  }

  .catalina-header.esta-encogido .catalina-logo img {
    height: 38px;
  }

  /* Los iconos se juntan un poco para que quepan */
  .catalina-acciones {
    gap: 0;
  }

  .catalina-accion {
    width: 38px;
    height: 38px;
  }

  /* El icono del quiz se va: en móvil el espacio es oro */
  .catalina-accion-quiz {
    display: none;
  }

  /* ---- Botones: ancho completo y altura cómoda para el dedo ---- */
  .catalina-btn,
  .card-cta,
  .quiz-btn,
  .catalina-btn-outline,
  .corporativos-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    font-size: 0.85rem;
    min-height: 48px; /* Mínimo recomendado para tocar con el dedo */
    box-sizing: border-box;
  }

  /* El botón de reservar del taller se mantiene compacto y en la esquina,
     aunque la tarjeta esté en el carrusel móvil (petición de Dylan: que no
     salga grande y feo). */
  .taller-card-footer {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }

  .card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* ---- Formularios ---- */
  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
  }

  /* ---- Pie de página ---- */
  .catalina-footer-abajo {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  .footer-legal {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
}

/* ==========================================================================
   480px — Móvil chico
   ========================================================================== */

@media (max-width: 480px) {
  /* Los productos SIGUEN en dos columnas también aquí: con la tarjeta
     ajustada (nombre a dos líneas, tipografía más pequeña y botón compacto)
     se ven bien, y a una sola columna la página se hacía interminable. */
  .products-grid,
  .catalina-products .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* El slider de la portada se ajusta solo en slider.css, que trae sus
     propios cortes en 1024 / 768 / 600 / 380. No añadir reglas suyas aquí. */

  /* Barra de estadísticas en dos columnas */
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .stat-number {
    font-size: 1.6rem;
  }

  .catalina-panel {
    width: 100vw;
  }

  .catalina-panel .catalina-menu > li > a {
    font-size: 1rem;
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* ==========================================================================
   PANTALLAS ANCHAS — que el contenido no se estire sin control
   ========================================================================== */

@media (min-width: 1600px) {
  .catalina-header-inner,
  .catalina-footer-grid,
  .talleres-container,
  .workshops-grid,
  .products-grid {
    max-width: 1360px;
  }
}

/* ==========================================================================
   IMPRESIÓN — que una reserva o un pedido se puedan imprimir limpios
   ========================================================================== */

@media print {
  .catalina-header,
  .catalina-beneficios,
  .catalina-panel,
  .catalina-panel-fondo,
  .catalina-whatsapp-flotante,
  .catalina-barra-fija,
  .catalina-footer,
  .catalina-hamburguesa {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}