/* ==========================================================================
   Cabbage — páginas. Lo que separa la HOME de una INTERIOR.

   La home es un hub: presenta y reparte. Su hero es el wordmark gigante y
   sus secciones solo dan el titular y un enlace. La interior es la
   profundidad: hero propio (nunca el wordmark), contenido a fondo y, al
   final, el mismo bloque de llamada. Esa jerarquía —wordmark solo en la
   home— es la que te dice de un vistazo dónde estás.
   ========================================================================== */

/* ==========================================================================
   HERO DE PÁGINA INTERIOR — sin wordmark, sin pista de scroll, sin pliegue.
   Ocupa poco más de media pantalla: la interior va al grano.
   ========================================================================== */
.phero {
  padding: calc(96px + var(--s10)) var(--margin) var(--s9);
  text-align: center;
}

.phero__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: var(--s5);
}

.phero h1 {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 15ch;
  color: var(--page-ink);
  transition: color var(--t-wash) var(--ease);
}

.phero .lead { max-width: 42ch; }

/* La miga de pan: dónde estás, en una línea. La home no la lleva. */
.crumb {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--muted);
}
.crumb a { border-bottom: 1px solid transparent; }
.crumb a:hover { border-bottom-color: currentColor; }
.crumb span[aria-current] { color: var(--page-ink); transition: color var(--t-wash) var(--ease); }

/* ==========================================================================
   EL TEASER DE LA HOME — el bloque que presenta un pilar y te manda a su
   página. No explica: enseña el titular, la tarjeta de color y el enlace.
   Es lo que impide que la home se convierta en un catálogo.
   ========================================================================== */
/* La tarjeta de sección, medida sobre la referencia: CUADRADA de 800 px
   (42 % del ancho de pantalla, 84 % del alto), radio 32 y borde de 4 px del
   tinte pálido de su color. En su web no hay ni una tarjeta apaisada: todas,
   de la ficha de 446 px al panel de 800, son cuadrados. Esta era 16/9, y por
   eso ocupaba la mitad de aire que las suyas.

   Y NO recorta: el medallón octogonal tiene que poder colgar por fuera. */
.teaser__card {
  /* El suelo de 320px del clamp() es un tamaño de diseño, no de pantalla:
     por debajo de ~762px de ancho (donde 42vw ya no llega a 320px) se
     imponía igual y la tarjeta salía más ancha que el propio margen de la
     página, empujando su medallón (que cuelga -18% más allá del borde)
     fuera del viewport. El min() la ata al hueco real disponible. */
  width: min(clamp(320px, 42vw, 800px), calc(100vw - 2 * var(--margin)));
  aspect-ratio: 1;
  border-radius: 32px;
  border: 4px solid;
  margin-top: var(--s6);
  padding: clamp(24px, 3vw, 48px);
  display: grid;
  place-items: center;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: visible;
}

/* Cada pilar, su color — el mismo que llevará su página */
.teaser--presencia .teaser__card { background: var(--g3); border-color: var(--g3-soft); }
.teaser--software  .teaser__card { background: var(--g2); border-color: var(--g2-soft); }
.teaser--sistemas  .teaser__card { background: var(--g4); border-color: var(--g4-soft); }

/* El motivo de la col ya no es EL contenido de la tarjeta: ahora dentro hay
   algo que enseñar, así que los anillos se van a la esquina y se callan.
   Sin sangrar por el borde: la tarjeta ya no recorta, y se saldrían. */
.teaser__rings {
  position: absolute;
  right: 3%;
  bottom: 3%;
  width: 40%;
  opacity: 0.16;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   EL MEDALLÓN QUE CUELGA. La pieza de la referencia que más echábamos de
   menos: un octógono de 277 px —el 35 % de la tarjeta— clavado en el borde,
   medio dentro y medio fuera. Ellos meten una foto; aquí, el motivo de la
   col en verde col, que es lo mismo que llevan los tacos del footer.
   Alterna de lado en cada pilar: es la variación que rompe la repetición
   sin cambiar la retícula.
   ------------------------------------------------------------------ */
.teaser__medal {
  position: absolute;
  z-index: 4;
  top: 23%;
  width: 35%;
  aspect-ratio: 1;
  clip-path: var(--oct);
  background: var(--dark);
  color: var(--sprout);
  display: grid;
  place-items: center;
  box-shadow: 0 18px 40px rgba(27, 27, 27, 0.2);
}
.teaser__medal svg { width: 44%; }

/* Más de medio cuerpo fuera del borde, como el suyo (‑178 px sobre 800 px de
   tarjeta = ‑22 %), y sobre una ESQUINA: si cae en el centro del borde, tapa
   la maqueta y parece un error en vez de una pieza. */
.teaser--presencia .teaser__medal { left: -18%;  top: 56%; }
.teaser--software  .teaser__medal { right: -18%; top: 16%; }
.teaser--sistemas  .teaser__medal { right: -18%; top: 60%; }

/* ------------------------------------------------------------------
   LA ETIQUETA CLAVADA EN LA TARJETA — el dato que remata lo que la
   maqueta enseña. Como las fichas voladoras de la referencia: fuera de
   la retícula, un poco torcidas, encima de todo.
   ------------------------------------------------------------------ */
.tag {
  position: absolute;
  z-index: 3;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-pill);
  background: #FDFBF4;
  color: var(--dark);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(27, 27, 27, 0.16);
}
.tag--tl { top: clamp(16px, 4%, 32px);    left: clamp(16px, 4%, 40px);  transform: rotate(-3deg); }
.tag--br { bottom: clamp(16px, 6%, 36px); right: clamp(16px, 4%, 40px); transform: rotate(2deg); }
/* Abajo y al centro: el único hueco libre del diagrama de integraciones */
.tag--bc { bottom: clamp(12px, 4%, 24px); left: 50%; transform: translateX(-50%) rotate(-1.5deg); }

/* El titular con una oración teñida — el recurso con el que la referencia
   pinta media frase de otro color. Uno por página, y este es el suyo.
   El coral de la paleta (--g1) sobre el lienzo trigo se queda en 2,4:1 y no
   se lee; este es el mismo coral bajado hasta pasar el 4,5:1. */
.h2--words .tint { color: #C2401A; }

@media (max-width: 720px) {
  /* El medallón deja de colgar: en móvil, medio octógono fuera del borde se
     come el margen de la página */
  .teaser__medal { width: 30%; }
  .teaser--presencia .teaser__medal { left: -10%; }
  .teaser--software  .teaser__medal,
  .teaser--sistemas  .teaser__medal { right: -10%; }
  .tag { font-size: 0.6875rem; padding: var(--s2) var(--s4); }
}

/* ==========================================================================
   BLOQUE DE LLAMADA — el mismo al final de TODAS las páginas, como su
   «Request access.». Que el cierre sea idéntico en todo el sitio es lo que
   lo hace sentir un sitio, y no seis páginas sueltas.
   ========================================================================== */
.cta {
  padding: clamp(96px, 14vh, 140px) var(--margin);
  text-align: center;
}
.cta__inner {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: var(--s6);
}
.cta h2 { max-width: 16ch; }

/* ==========================================================================
   PROSA DE PÁGINA INTERIOR — el contenido a fondo que la home no tiene
   ========================================================================== */
.prose {
  padding: clamp(64px, 10vh, 110px) var(--margin);
}
.prose__inner {
  max-width: 880px;
  margin: 0 auto;
}

/* Dos columnas: el titular manda a la izquierda, el detalle a la derecha.
   Rompe el centrado de la home — la interior se lee, no se contempla. */
.split {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.3fr);
  gap: var(--s8);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  text-align: left;
}
.split h2 { max-width: 12ch; }

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: var(--s6); }
}

/* La lista de lo que incluye cada pilar */
.checks { display: grid; gap: var(--s5); }
.check {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--s4);
  align-items: start;
}
.check__dot {
  width: 2rem;
  aspect-ratio: 1;
  clip-path: var(--oct);
  background: var(--page-ink);
  display: grid;
  place-items: center;
  transition: background var(--t-wash) var(--ease);
}
.check__dot svg { width: 12px; color: var(--page); }
.check h3 { margin-bottom: var(--s1); color: var(--page-ink); transition: color var(--t-wash) var(--ease); }
.check p { color: var(--muted); }

/* ==========================================================================
   CASOS — la ficha de un proyecto real, con la cifra que cambió
   ========================================================================== */
.cases {
  display: grid;
  gap: var(--s6);
  max-width: var(--max);
  margin: 0 auto;
  text-align: left;
}
.case {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(280px, 2fr) auto;
  gap: var(--s6);
  align-items: center;
  padding: var(--s6) 0;
  border-top: 1px solid var(--line);
}
.cases .case:last-child { border-bottom: 1px solid var(--line); }

.case__who { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--page-ink); transition: color var(--t-wash) var(--ease); }
.case__what { color: var(--muted); }
.case__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--page-ink);
  transition: color var(--t-wash) var(--ease);
}
.case__num small { display: block; font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; color: var(--muted); margin-top: var(--s2); white-space: normal; }

@media (max-width: 880px) {
  .case { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ==========================================================================
   TRAYECTORIA (nosotros) — los hitos, en una línea de tiempo sobria
   ========================================================================== */
.milestones {
  display: grid;
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.milestone {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--s6);
  padding: var(--s6) 0;
  border-top: 1px solid var(--line);
}
.milestones .milestone:last-child { border-bottom: 1px solid var(--line); }
.milestone__year { color: var(--page-ink); transition: color var(--t-wash) var(--ease); }
.milestone h3 { margin-bottom: var(--s1); }
.milestone p { color: var(--muted); }

@media (max-width: 620px) {
  .milestone { grid-template-columns: 1fr; gap: var(--s2); }
}

/* ==========================================================================
   PREGUNTAS FRECUENTES — <details> nativo: abre sin una línea de JS
   ========================================================================== */
.faq {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--page-ink);
  transition: color var(--t-wash) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }

/* El signo abre y cierra: gira 45° y la cruz se vuelve un menos */
.faq__item summary::after {
  content: '';
  flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform var(--t-micro) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }

.faq__item p {
  color: var(--muted);
  max-width: 60ch;
  padding-bottom: var(--s6);
}

/* ==========================================================================
   MODAL DE CONTACTO — como el suyo: el formulario no es una página, se abre
   encima desde cualquier sitio. <dialog> nativo: trae el foco atrapado, el
   cierre con Esc y el fondo inerte sin que tengamos que programarlo.
   ========================================================================== */
.modal {
  border: 0;
  padding: 0;
  max-width: min(560px, calc(100vw - 2 * var(--margin)));
  width: 100%;
  /* El formulario completo es más alto que una pantalla baja: sin techo, el
     diálogo se salía por arriba y por abajo y el botón «Enviar» quedaba fuera
     de alcance. Lo limitamos a la altura visible y dejamos que el contenido
     scrollee por dentro (en .modal__inner). */
  max-height: calc(100dvh - 2 * var(--margin));
  flex-direction: column;
  border-radius: 32px;
  background: var(--page);
  color: var(--ink);
  box-shadow: 0 40px 90px rgba(34, 51, 26, 0.35);
  /* hidden (antes visible) para que el scroll interno y la barra respeten las
     esquinas redondeadas. El botón de cierre vive fuera del área scrollable. */
  overflow: hidden;
  /* Entrada y salida del propio <dialog>, sin JS: allow-discrete mantiene
     el diálogo (y su ::backdrop) en la capa superior mientras dura la
     transición de salida, en vez de desaparecer de golpe al cerrar. */
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease-pop),
              display 260ms allow-discrete, overlay 260ms allow-discrete;
}
.modal[open] { display: flex; opacity: 1; transform: translateY(0) scale(1); }
/* Estado de partida para la transición de ENTRADA — sin esto, el diálogo
   nacería ya en su estado final y no habría nada que animar */
@starting-style {
  .modal[open] { opacity: 0; transform: translateY(28px) scale(0.96); }
}

.modal::backdrop {
  background: rgba(34, 51, 26, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 260ms var(--ease), display 260ms allow-discrete, overlay 260ms allow-discrete;
}
.modal[open]::backdrop { opacity: 1; }
@starting-style {
  .modal[open]::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .modal, .modal::backdrop { transition: none; }
  .modal { opacity: 1; transform: none; }
  .modal::backdrop { opacity: 1; }
}

.modal__inner {
  padding: var(--s8);
  /* min-height:0 permite que este hijo flex se encoja por debajo de su
     contenido; sin él, overflow-y no tendría nada que desbordar y no habría
     scroll. overscroll-behavior evita arrastrar la página de fondo al final. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal__inner h2 { max-width: none; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.modal__inner .lead { margin-top: var(--s4); max-width: none; }
.modal .form { margin-top: var(--s7); }

.modal__close {
  position: absolute;
  top: var(--s5); right: var(--s5);
  width: 40px;
  aspect-ratio: 1;
  clip-path: var(--oct);
  background: var(--pill-bg-2);
  display: grid;
  place-items: center;
  transition: background var(--t-micro) var(--ease);
}
.modal__close:hover { background: var(--pill-bg-3); }
.modal__close:active { background: var(--dark); }
/* La X gira un cuarto de vuelta al pasar el ratón: se transforma en una
   cruz "+" — pequeño gesto con sentido, no un giro porque sí. Se anima
   solo el icono, no el botón (que tiene clip-path): así no hay riesgo de
   que el octógono se rasterice borroso al escalar. */
.modal__close svg { width: 14px; transition: transform 220ms var(--ease-pop); }
.modal__close:hover svg { transform: rotate(90deg); }
.modal__close:active svg { transform: rotate(90deg) scale(0.85); transition-duration: 90ms; }

@media (prefers-reduced-motion: reduce) {
  .modal__close svg { transition: none; }
  .modal__close:hover svg, .modal__close:active svg { transform: none; }
}

@media (max-width: 620px) {
  .modal__inner { padding: var(--s6); }
}