/*
Theme Name: Circular
Theme URI: https://floatleftstudio.com
Author: {float:left;} studio
Description: Tema mínimo para landings con bloques flexibles (ACF PRO). Sin jQuery ni librerías.
Version: 2.1
Requires at least: 6.4
Requires PHP: 8.0
License: propietario
Text Domain: circular
*/

/* =========================================================
   1. Tokens
   ========================================================= */
:root {
  /* paleta del proyecto: lo único que cambia de una web a otra */
  --claro: #f2ede0;    /* crema */
  --oscuro: #546654;   /* verde */
  --suave: #c2d9db;    /* azul */
  --acento: #a65c3d;   /* terracota */
  --tinta: #1d1d1b;    /* «Black» del Figma */
  --blanco: #ffffff;

  /* texto: Helvetica Neue del sistema (sin licencia web) — en Mac/iOS es la real;
     donde no está, Inter autoalojada. Botones: Familjen Grotesk */
  --fuente: "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;
  --fuente-boton: "Familjen Grotesk", "Helvetica Neue", Inter, sans-serif;

  /* escala fluida: nunca px fijo */
  --t-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
  --t-s: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --t-m: clamp(1rem, 1.39vw, 1.46rem);      /* 20px en 1440 · tope 23,4 · mín. 16 — el texto corriente */
  --t-l: clamp(1.125rem, 1.94vw, 2.04rem);  /* 28px en 1440 · tope 32,6 · mín. 18 */
  --t-xl: clamp(1.5rem, 2.5vw, 2.625rem);   /* 36px en 1440 · tope 42 · mín. 24 */
  --t-xxl: clamp(1.75rem, 3.19vw, 3.35rem); /* 46px en 1440 · tope 53,6 (el de 1680) · mín. 28 */

  /* Todos los tamaños fluidos topan en 1680 (valor de 1440 × 1680/1440).
     rejilla: 12 columnas. El fondo de cada bloque es siempre 100 %;
     el contenido a sangre tope 1800 px, y con márgenes 93 % (tope 1674 px) */
  --ancho-sangre: 112.5rem;
  --ancho-margenes: 104.625rem;

  /* paddings verticales: escala cerrada.
     s = 40px en 1440 (2.78vw), tope 50px */
  --pad-s: clamp(1.5rem, 2.64vw, 2.77rem);    /* 38 en 1440 · tope 44,3 · móvil 24, como antes */
  --pad-m: clamp(2rem, 4.17vw, 4.38rem);      /* 60 en 1440 · tope 70 · mín. 32 */
  --pad-l: clamp(2.5rem, 5.56vw, 5.84rem);    /* 80 en 1440 · tope 93,4 · mín. 40 */
}

/* =========================================================
   2. Base
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

/* overflow-anchor: none → el navegador no compensa solo cuando algo de arriba cambia de
   altura; lo hace pestanas.js, una sola vez (si no, se compensa dos veces y salta) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-anchor: none; overflow-x: clip; }
/* overflow-x: clip → lo que se sale a todo el ancho (el carrusel, 100vw) no abre scroll horizontal
   cuando hay barra de desplazamiento vertical (Windows). */

body {
  margin: 0;
  background: var(--claro);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-m);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, p, ul, figure { margin: 0 0 0.6em; }

h1, h2, h3 { font-weight: 400; line-height: normal; }

:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 3px; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   3. Wrap: la banda
   ========================================================= */
.wrap {
  position: relative;
  z-index: 1;
  background: var(--wrap-fondo, var(--claro));
  color: var(--wrap-texto, var(--tinta));
  padding-block: var(--wrap-padv, var(--pad-m));
}

/* fondo → color de texto y de foco (el foco nunca del mismo color que el fondo) */
.wrap--claro  { --wrap-fondo: var(--claro);  --wrap-texto: var(--tinta);  --foco: var(--acento); }
.wrap--oscuro { --wrap-fondo: var(--oscuro); --wrap-texto: var(--blanco); --foco: var(--claro); }
.wrap--suave  { --wrap-fondo: var(--suave);  --wrap-texto: var(--tinta);  --foco: var(--acento); }
.wrap--acento { --wrap-fondo: var(--acento); --wrap-texto: var(--blanco); --foco: var(--claro); }

.wrap--padv-sin { --wrap-padv: 0; }
.wrap--padv-s   { --wrap-padv: var(--pad-s); }
.wrap--padv-m   { --wrap-padv: var(--pad-m); }
.wrap--padv-l   { --wrap-padv: var(--pad-l); }

/* ancho del contenido dentro del bloque (el fondo siempre es 100 %) */
.wrap--padh-sin   { --wrap-ancho: min(100%, var(--ancho-sangre)); }
.wrap--padh-ancho { --wrap-ancho: min(93%, var(--ancho-margenes)); }

/* =========================================================
   4. Columnas: 12 doceavos, todo a 12 en móvil
   ========================================================= */
.wrap__columnas {
  width: var(--wrap-ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0; /* filas y columnas; el aire lo ponen los elementos o la clase del bloque */
}

.columna { grid-column: 1 / -1; min-width: 0; }
.columna--centro { text-align: center; }
.columna--derecha { text-align: right; }
.columna--centro .elemento,
.columna--derecha .elemento { margin-inline: auto 0; }
.columna--centro .elemento { margin-inline: auto; }

@media (min-width: 48rem) {
  .columna { grid-column: span var(--span, 12); }
  .columna--fin { grid-column: calc(13 - var(--span, 12)) / -1; }
}

/* =========================================================
   5. Elementos
   ========================================================= */
/* sin aire automático: el espacio lo pide cada elemento (arriba / abajo, escala cerrada) */
.elemento { margin: 0; }
.elemento--arriba-s { margin-top: var(--pad-s); }
.elemento--arriba-m { margin-top: var(--pad-m); }
.elemento--arriba-l { margin-top: var(--pad-l); }
.elemento--abajo-s { margin-bottom: var(--pad-s); }
.elemento--abajo-m { margin-bottom: var(--pad-m); }
.elemento--abajo-l { margin-bottom: var(--pad-l); }

/* texto: la jerarquía sale de la etiqueta, no de clases */
.elemento--texto { font-size: var(--t-m); }
.elemento--texto h1,
.elemento--texto h2 { font-size: var(--t-xxl); margin-bottom: 0.5em; }
.elemento--texto h3 { font-size: var(--t-xl); margin-bottom: 0.3em; }
.elemento--texto p { margin-bottom: 0.9em; }
.elemento--texto p:last-child { margin-bottom: 0; }
.elemento--texto small { font-size: var(--t-xs); }
.elemento--texto ul { margin: 0 0 0.9em; padding-left: 1.1em; }
.elemento--texto li { margin-bottom: 0.5em; }
.elemento--texto strong { font-weight: 700; }

/* tamaño de texto por clase (campo «Clase CSS» del elemento): el párrafo hereda */
.t-xs { font-size: var(--t-xs); }
.t-s { font-size: var(--t-s); }
.t-m { font-size: var(--t-m); }
.t-l { font-size: var(--t-l); }
.t-xl { font-size: var(--t-xl); }
.t-xxl { font-size: var(--t-xxl); }

/* sub-rejilla dentro de un texto (columna de 9): dos columnas de 4 doceavos cada una,
   separadas 60px en 1440 (no una columna entera). Lo que sobra queda libre a la derecha. En móvil, una */
.dos-columnas { display: grid; grid-template-columns: 1fr; row-gap: 1em; padding-block: var(--pad-s) var(--pad-m); }
@media (min-width: 48rem) {
  .dos-columnas {
    grid-template-columns: repeat(2, calc(100% * 4 / 9));
    column-gap: clamp(2rem, 4.17vw, 4.38rem);     /* 60 en 1440 */
  }
}
.dos-columnas > * > :last-child { margin-bottom: 0; }

/* imagen */
.elemento--imagen img { width: 100%; }
.elemento--imagen-pequena { max-width: clamp(6rem, 14vw, 12.5rem); }
.elemento--imagen-media { max-width: 50%; }
.elemento--imagen-completa { max-width: 100%; }

/* logos: fila de imágenes a la misma altura; en pantallas estrechas saltan de línea */
.elemento--logos { --logos-alto: clamp(2.5rem, 4.79vw, 5.03rem); }   /* 69px en 1440 (medido en el Figma) · tope 80,5 · mín. 40 */
.logos__titulo { margin-bottom: 0.8em; }
.logos__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 2.22vw, 2.33rem);   /* 32px en 1440, medido en el Figma */
  margin: 0;
  padding: 0;
  list-style: none;
}
.logos__lista img { width: auto; height: var(--logos-alto); }
.columna--derecha .logos__lista { justify-content: flex-end; }
.columna--centro .logos__lista { justify-content: center; }

/* carrusel: una imagen de hasta 1440 de ancho, centrada; las vecinas asoman a los lados
   con una calle pequeña (Flavia, 16/10). Proporción del Figma: 1440 × 885.
   La pista es scroll horizontal con snap; las flechas y el paso automático, en carrusel.js */
.elemento--carrusel {
  --carrusel-ancho: min(100%, 90rem);              /* 1440 */
  --carrusel-calle: clamp(0.5rem, 1.1vw, 1rem);     /* 16px en 1440 */
  position: relative;
  /* a todo el ancho de la ventana, salga del bloque que salga: la pista no tiene tope,
     solo lo tienen las imágenes (Flavia, 16/10) */
  width: 100vw;
  max-width: none !important;
  margin-inline: calc(50% - 50vw);
}
.carrusel__pista {
  display: flex;
  gap: var(--carrusel-calle);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: calc((100% - var(--carrusel-ancho)) / 2);   /* sin JS: la primera y la última, también centradas */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
/* con JS el carrusel es un bucle (copias en los extremos, carrusel.js): la pista no necesita aire a los lados */
.carrusel--bucle .carrusel__pista { padding-inline: 0; scroll-behavior: auto; }
.carrusel__pista:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.carrusel__slide {
  flex: 0 0 var(--carrusel-ancho);
  margin: 0;
  aspect-ratio: 1440 / 885;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.carrusel__slide img { width: 100%; height: 100%; object-fit: cover; }

/* flechas: sobre la imagen, a media altura, pegadas a los lados de la imagen central */
.carrusel__flecha {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(2.5rem, 4vw, 3.75rem);
  height: clamp(2.5rem, 4vw, 3.75rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  font-size: var(--t-xxl);                     /* flecha de ~40px en 1440, como en el Figma */
  cursor: pointer;
  z-index: 1;
}
/* en el Figma la flecha está a unos 60px del borde de la imagen */
.carrusel__flecha--ant { left: calc((100% - var(--carrusel-ancho)) / 2 + clamp(1rem, 3.4vw, 3rem)); }
.carrusel__flecha--sig { right: calc((100% - var(--carrusel-ancho)) / 2 + clamp(1rem, 3.4vw, 3rem)); }
.carrusel__flecha:hover .flecha { transform: translateX(0.3em); }
.carrusel__flecha--ant:hover .flecha { transform: translateX(-0.3em); }
.carrusel__flecha:focus-visible { outline: 3px solid var(--blanco); outline-offset: -6px; }
.js .carrusel__flecha { display: inline-flex; }
.carrusel__flecha { display: none; }   /* sin JS no hacen nada: no se muestran */

/* logotipo */
.elemento--logotipo { width: 100%; }
.elemento--logotipo img { width: 100%; }
.elemento--logotipo-texto { font-size: var(--t-xxl); text-transform: uppercase; }

/* botón: sólido y contorno, y solo esos dos */
/* medidas del Figma a 1440: alto 64, padding 20, gap 10, radio 20, texto 20. Todo en vw con tope */
.boton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: clamp(3rem, 4.44vw, 4.0625rem);          /* 64px en 1440 · tope 65 */
  padding-inline: clamp(1rem, 1.39vw, 1.46rem);    /* 20px en 1440 */
  gap: 0.25em;   /* el espacio entre texto y flecha del Figma */
  border-radius: clamp(1.125rem, 1.3vw, 1.375rem);  /* 18–22px */
  font-family: var(--fuente-boton);
  font-size: clamp(1rem, 1.39vw, 1.46rem);          /* 20px en 1440 */
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

/* la flecha: el carácter → / ← en Familjen Grotesk, como en el Figma (no un icono) */
.flecha {
  display: inline-block;
  font-family: var(--fuente-boton);
  transition: transform 0.3s ease;
}

/* hover como en modare.org: solo se desplaza la flecha (hacia fuera) */
.boton:hover .flecha { transform: translateX(0.3em); }

/* enlace «volver»: texto con flecha, sin botón */
.volver { display: inline-flex; align-items: center; gap: 0.25em; text-decoration: none; }
.volver:hover .flecha { transform: translateX(-0.3em); }

.boton--solido { background: var(--acento); color: var(--blanco); }
.boton--contorno { background: transparent; color: var(--acento); border: 1px solid currentColor; }   /* el sólido «al revés» */

/* =========================================================
   6. Categorías en acordeón (bloques con pestaña) — assets/js/pestanas.js
   ========================================================= */
/* La pestaña es la lengüeta del Figma: 365 × 67 en 1440, laterales curvos, sin esquinas
   redondeadas en el bloque. Forma exacta del SVG del diseño como máscara; el color lo
   da el fondo del bloque. Posición: campo «Pestaña: posición (%)» del bloque. */
:root {
  --pestana-ancho: clamp(12rem, 25.35vw, 26.6rem);
  --pestana-alto: calc(var(--pestana-ancho) * 67 / 365);
  --pestana-forma: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='459 0 365 67' preserveAspectRatio='none'><path d='M459 67C473 67 480.6 60.6 485.7 46.7L495.8 17.7C499.6 6.3 509.7 0 522.3 0H759.6C773.5 0 783.6 6.3 787.4 17.7L797.5 46.7C802.5 60.6 810.1 67 824 67Z'/></svg>");
}

/* el bloque apilado deja transparente la franja de la pestaña y SUBE sobre el bloque anterior
   esa misma altura: a los lados de la lengüeta se ve el color de arriba, nunca la página */
.wrap--apilado {
  background: transparent;
  margin-top: calc(-1 * var(--pestana-alto));
  padding-top: calc(var(--pestana-alto) + var(--wrap-padv, var(--pad-m)));
  padding-bottom: var(--pad-l);   /* el bloque mide lo que mide su contenido, con aire abajo */
  transition: padding 0.5s ease;
}

/* …y el bloque que va justo antes se alarga por abajo lo que le tapa la siguiente lengüeta */
.wrap:has(+ .wrap--apilado) {
  padding-bottom: calc(var(--wrap-padv, var(--pad-m)) + var(--pestana-alto));
}
.wrap--apilado:has(+ .wrap--apilado) {
  padding-bottom: calc(var(--pad-l) + var(--pestana-alto));
}

/* panel plegable: de 0 a su altura real con grid-template-rows (sin medir en JS) */
.wrap__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s ease;
}
.wrap__panel-dentro { min-height: 0; overflow: hidden; }

/* cerrada: la lengüeta y una franja de su color, donde asoma la lengüeta siguiente */
.js .wrap--apilado.esta-cerrado {
  padding-top: var(--pestana-alto);
  /* + una franja de su color entre su lengüeta y la siguiente: que respiren cerradas */
  padding-bottom: calc(var(--pestana-alto) + clamp(0.75rem, 1.4vw, 1.4rem));   /* 20px en 1440 · 12 en móvil */
}
.js .wrap--apilado.esta-cerrado .wrap__panel { grid-template-rows: 0fr; }

/* lo que se cierra por encima al abrir otra: sin animación, para poder corregir el scroll */
.wrap--apilado.sin-transicion,
.wrap--apilado.sin-transicion .wrap__panel { transition: none; }

.wrap--apilado::before {
  content: "";
  position: absolute;
  inset: var(--pestana-alto) 0 0 0;
  background: var(--wrap-fondo);
  z-index: -1;
}

.wrap__pestana {
  position: absolute;
  top: 0;
  left: min(var(--pestana-x, 32%), calc(100% - var(--pestana-ancho) - 3.5%));   /* nunca se sale por la derecha */
  width: var(--pestana-ancho);
  height: calc(var(--pestana-alto) + 1px); /* 1px de solape: sin línea entre pestaña y bloque */
  margin: 0;
  padding-inline: 15%;                     /* deja libres los laterales curvos */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wrap-fondo);
  color: var(--wrap-texto);
  font-size: var(--t-l);   /* 28px en 1440 */
  white-space: nowrap;
  -webkit-mask: var(--pestana-forma) no-repeat center / 100% 100%;
  mask: var(--pestana-forma) no-repeat center / 100% 100%;
}

/* la lengüeta es un botón: hereda todo del h2 */
.wrap__pestana button {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.wrap__pestana button:focus-visible { outline: 3px solid var(--foco); outline-offset: -6px; }

/* revelado, por bloque (campo «Efecto al aparecer»). La clase que oculta la pone el JS, nunca el HTML */
.js .wrap--efecto-aparecer .revelar,
.js .wrap--efecto-subir .revelar,
.js .wrap--efecto-izquierda .revelar,
.js .wrap--efecto-derecha .revelar {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .wrap--efecto-subir .revelar     { transform: translateY(1.5rem); }
.js .wrap--efecto-izquierda .revelar { transform: translateX(-2.5rem); }
.js .wrap--efecto-derecha .revelar   { transform: translateX(2.5rem); }
/* misma especificidad que las de arriba y después de ellas: gana */
.js .wrap .revelar.es-visible { opacity: 1; transform: none; }
.js .revelar:nth-child(2) { transition-delay: 0.12s; }
.js .revelar:nth-child(3) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .wrap--apilado,
  .wrap__panel { transition: none; }
}

/* =========================================================
   6 bis. Pie: enlaces legales (menú «Pie: enlaces legales»)
   ========================================================= */
.pie { padding-block: var(--pad-s); }
.pie__legal {
  width: min(93%, var(--ancho-margenes));
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.5em;
  font-size: var(--t-s);
}
.pie__legal a { text-decoration: none; }
.pie__legal a:hover { text-decoration: underline; }

/* =========================================================
   7. Página simple y 404
   ========================================================= */
.pagina { padding-block: var(--pad-m); }
/* «Volver»: arriba, alineado a la izquierda con el contenido de la web (como el pie legal) */
.pagina__volver { width: min(93%, var(--ancho-margenes)); margin: 0 auto var(--pad-m); }
.pagina__contenido { width: min(93%, 62ch); margin-inline: auto; }
.pagina__contenido h1 { font-size: var(--t-xxl); margin-bottom: 1em; }
.pagina__contenido h2 { font-size: var(--t-l); margin: 1.6em 0 0.5em; }
.pagina__contenido p,
.pagina__contenido li { font-size: var(--t-m); margin-bottom: 0.9em; }
.pagina__contenido ul { padding-left: 1.1em; margin-bottom: 0.9em; }

/* =========================================================
   8. Móvil (< 768px, el mismo corte que modare.org)
   Indicaciones de Astrid (29/09): texto pequeño 16, grande 20–22, todo a una
   columna, botón como el de Moda re- en móvil, logos en tres filas.
   ========================================================= */
@media (max-width: 47.99rem) {
  :root {
    --t-m: 1rem;          /* 20 → 16 */
    --t-l: 1.25rem;       /* 28 → 20 */
    --t-xl: 1.375rem;     /* 36 → 22 */
    --t-xxl: 1.75rem;     /* 46 → 28 */
    --pestana-ancho: 15rem;
  }

  /* márgenes laterales de Astrid en móvil: 17px en 390 (4,36vw) */
  .wrap--padh-ancho { --wrap-ancho: calc(100% - 8.72vw); }
  .pie__legal,
  .pagina__volver,
  .pagina__contenido { width: calc(100% - 8.72vw); }

  /* botón: el de Astrid en móvil (Figma «M1. Home»: 52 alto, texto 14),
     algo más compacto y con la letra un pelo mayor: 48 / 15 */
  .boton {
    height: 3rem;
    padding-inline: 1.25rem;
    border-radius: 1.25rem;
    font-size: 0.9375rem;
  }

  /* dos columnas apiladas: que se lean como una sola lista */
  .dos-columnas { row-gap: 0.5em; }
  .dos-columnas li:last-child { margin-bottom: 0; }

  /* lengüeta: el texto, pequeño, para que quepa */
  .wrap__pestana { font-size: var(--t-m); padding-inline: 12%; }

  /* logos: dos por fila (los de la UE, solos en la suya por ir en otra columna) */
  .elemento--logos { --logos-alto: clamp(2rem, 10vw, 2.75rem); }
  .logos__lista {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 1rem 1.25rem;
  }
  .columna + .columna .logos__titulo { margin-top: var(--pad-s); }
}