/* Section container shapes and transitions. Kept separate from content layouts. */

/* Siluetas de las transiciones, como mascaras SVG. Fuente unica: las usan
   tanto la banda real como las miniaturas del selector, para que lo que se
   elige sea exactamente lo que se ve. preserveAspectRatio="none" deja que se
   estiren al tamano que les da --section-transition-mask-size.
   Onda y zigzag son un periodo completo y empiezan y acaban a la misma altura,
   asi que se pueden repetir en horizontal sin salto. */
:root {
  --nb-shape-curve: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 0H100C100 55.2 72.4 100 50 100C27.6 100 0 55.2 0 0Z" fill="%23000"/></svg>');
  --nb-shape-wave: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 50C12 8 38 8 50 50C62 92 88 92 100 50V0H0Z" fill="%23000"/></svg>');
  --nb-shape-zigzag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 26L50 88L100 26V0H0Z" fill="%23000"/></svg>');
  --nb-shape-diagonal: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 0H100V18L0 100Z" fill="%23000"/></svg>');
  --nb-shape-point: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 0H100L50 100Z" fill="%23000"/></svg>');
  /* El degradado NO es una rampa lineal: con alfa lineal la pendiente salta de
     golpe al empezar y al acabar, y el ojo lee esos dos cortes como una banda
     gris pegada. Estos topes siguen una curva suave (3t²-2t³), que entra y sale
     planas, asi que ni se ve donde empieza ni donde termina. */
  --nb-shape-fade: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, .96) 12%,
    rgba(0, 0, 0, .844) 25%,
    rgba(0, 0, 0, .676) 38%,
    rgba(0, 0, 0, .5) 50%,
    rgba(0, 0, 0, .324) 62%,
    rgba(0, 0, 0, .156) 75%,
    rgba(0, 0, 0, .04) 88%,
    rgba(0, 0, 0, 0) 100%);
}

[data-section] {
  --section-frame-fill: transparent;
  /* Color que la seccion muestra en su BORDE SUPERIOR. La seccion anterior lo
     copia en --section-next-color (lo hace landing_section_shapes.js) para
     rellenar el hueco que deja su forma de transicion: asi el empalme es
     continuo aunque las dos secciones tengan fondos distintos. */
  --section-edge-top-color: var(--landing-bg, #fff);
  --section-next-color: var(--landing-bg, #fff);
  /* Alto de la banda de transicion. Todo lo demas (padding, mascara, relleno)
     se deriva de aqui, asi que basta cambiarlo en un sitio por breakpoint. */
  --section-transition-h: 76px;
  /* Hueco que el contenido debe dejar sobre la banda. Por defecto la banda
     entera, porque las formas recortadas muerden el fondo. */
  --section-transition-clearance: var(--section-transition-h);
  isolation: isolate;
}

[data-section][data-section-bg="none"] {
  --section-frame-fill: transparent;
  --section-edge-top-color: var(--landing-bg, #fff);
}

[data-section][data-section-bg="light"] {
  --section-frame-fill: rgba(248, 250, 252, .96);
  --section-edge-top-color: #f8fafc;
}

[data-section][data-section-bg="dark"] {
  --section-frame-fill: linear-gradient(135deg, #1e293b, #0f172a);
  --section-edge-top-color: #1e293b;
}

[data-section][data-section-bg="gradient"] {
  --section-frame-fill: linear-gradient(135deg, var(--landing-primary), var(--landing-accent));
  --section-edge-top-color: var(--landing-primary);
}

[data-section][data-section-bg="accent"] {
  --section-frame-fill: var(--landing-accent);
  --section-edge-top-color: var(--landing-accent);
}

[data-section][data-section-bg="custom"] {
  --section-frame-fill: var(--section-bg-custom, #fff);
  --section-edge-top-color: var(--section-bg-custom, #fff);
}

[data-section][data-section-frame]:not([data-section-frame="none"]) {
  background: transparent !important;
}

[data-section] > .section-frame-surface {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

[data-section][data-section-frame="none"] > .section-frame-surface {
  background: transparent;
}

[data-section][data-section-frame]:not([data-section-frame="none"]) > .section-frame-surface {
  background: var(--section-frame-fill);
}

.section-image-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

[data-section][data-section-frame="rounded"] > .section-frame-surface {
  inset: 12px clamp(10px, 2vw, 28px);
  border-radius: clamp(28px, 4vw, 56px);
}

[data-section][data-section-frame="capsule"] > .section-frame-surface {
  inset: 12px clamp(10px, 2vw, 28px);
  border-radius: min(12vw, 150px);
}

[data-section][data-section-frame="inverted-point"] {
  padding-bottom: clamp(118px, 12vw, 168px) !important;
}

[data-section][data-section-frame="inverted-point"] > .section-frame-surface {
  inset: 10px clamp(8px, 1.6vw, 22px) 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 76px), 50% 100%, 0 calc(100% - 76px));
}

[data-section][data-section-frame="slanted"] > .section-frame-surface {
  inset: 8px clamp(6px, 1.3vw, 18px);
  clip-path: polygon(4% 0, 100% 7%, 96% 100%, 0 92%);
}

[data-section][data-section-frame="organic"] > .section-frame-surface {
  inset: 10px clamp(8px, 1.6vw, 24px);
  border-radius: 10% 28% 12% 24% / 22% 10% 28% 14%;
}

[data-section][data-section-frame="arch"] {
  padding-top: clamp(108px, 12vw, 156px) !important;
}

[data-section][data-section-frame="arch"] > .section-frame-surface {
  inset: 8px clamp(8px, 1.6vw, 24px);
  border-radius: 50% 50% 28px 28px / 118px 118px 28px 28px;
}

/* =====================================================================
   Transiciones entre secciones
   =====================================================================
   Modelo: la seccion pinta su fondo REAL en .section-frame-surface (que ya
   cubre toda la caja) y se recorta con `mask` en los ultimos
   --section-transition-h px. El hueco que deja la forma lo rellena
   .section-transition con el color del borde superior de la seccion
   SIGUIENTE, asi que la forma empalma de verdad con lo que viene debajo en
   vez de descubrir el fondo de la pagina.

   Al pintar una sola capa (la superficie) desaparecen a la vez la costura de
   1px y el salto de color que tenian los fondos degradados: antes la banda se
   pintaba aparte con un color plano aproximado. */

[data-section] {
  --section-transition-mask: linear-gradient(#000, #000);
  --section-transition-mask-size: 100% var(--section-transition-h);
  --section-transition-mask-repeat: no-repeat;
}

/* Relleno de la banda: lo que se ve por detras de la forma. Va a todo el ancho
   porque una transicion solo se permite sin marco (ver
   SECTION_TRANSITION_COMPATIBLE_FRAMES en routes/captación/_common.py): los
   marcos meten el fondo hacia dentro y la banda no podria casar con el. */
[data-section] > .section-transition {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2;
  display: none;
  height: var(--section-transition-h);
  background: var(--section-next-color);
  pointer-events: none;
}

[data-section][data-section-transition]:not([data-section-transition="none"]) {
  /* La banda ocupa --section-transition-h; el resto es aire para que el
     contenido no roce la forma. Antes se sumaba ademas un hijo espaciador de
     76px en el flujo: reservaba el hueco dos veces (>200px de vacio) y
     descuadraba las secciones flex/grid. Ya no existe. */
  padding-bottom: calc(var(--section-transition-clearance) + clamp(32px, 4vw, 64px)) !important;
  background: transparent !important;
  /* Varias secciones traen border-radius propio (y benefits ademas
     overflow:hidden), que recortaba los extremos de la forma. */
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* The public same-DOM embed installs a high-specificity WordPress firewall. */
#landingContentWrapper#landingContentWrapper#landingContentWrapper#landingContentWrapper#landingContentWrapper [data-section][data-section-frame="inverted-point"] {
  padding-bottom: clamp(118px, 12vw, 168px) !important;
}

#landingContentWrapper#landingContentWrapper#landingContentWrapper#landingContentWrapper#landingContentWrapper [data-section][data-section-frame="arch"] {
  padding-top: clamp(108px, 12vw, 156px) !important;
}

#landingContentWrapper#landingContentWrapper#landingContentWrapper#landingContentWrapper#landingContentWrapper [data-section][data-section-transition]:not([data-section-transition="none"]) {
  padding-bottom: calc(var(--section-transition-clearance) + clamp(32px, 4vw, 64px)) !important;
  background: transparent !important;
}

[data-section][data-section-transition]:not([data-section-transition="none"]) > .section-transition {
  display: block;
}

/* La superficie sigue cubriendo la caja entera y es la mascara la que talla la
   forma. La capa 1 conserva todo lo que hay por encima de la banda; la capa 2
   es la forma. Se solapan 1px para que no quede una linea de fondo de pagina. */
[data-section][data-section-transition]:not([data-section-transition="none"]) > .section-frame-surface {
  background: var(--section-frame-fill);
  -webkit-mask-image: linear-gradient(#000, #000), var(--section-transition-mask);
          mask-image: linear-gradient(#000, #000), var(--section-transition-mask);
  -webkit-mask-position: top left, bottom left;
          mask-position: top left, bottom left;
  -webkit-mask-size: 100% calc(100% - var(--section-transition-h) + 1px), var(--section-transition-mask-size);
          mask-size: 100% calc(100% - var(--section-transition-h) + 1px), var(--section-transition-mask-size);
  -webkit-mask-repeat: no-repeat, var(--section-transition-mask-repeat);
          mask-repeat: no-repeat, var(--section-transition-mask-repeat);
}

/* El degradado necesita mas recorrido que las formas recortadas: en 92px un
   fondo oscuro tenia que llegar a blanco de golpe y se leia como una franja
   gris. Con mas altura y curva suave el corte desaparece. */
[data-section][data-section-transition="fade"] {
  --section-transition-h: clamp(110px, 11vw, 160px);
  --section-transition-mask: var(--nb-shape-fade);
  /* Aqui la banda arranca opaca, asi que el contenido puede entrar en su tramo
     alto sin perder fondo: no hace falta despejarla entera. */
  --section-transition-clearance: calc(var(--section-transition-h) * .5);
}

[data-section][data-section-transition="curve"] {
  --section-transition-mask: var(--nb-shape-curve);
}

[data-section][data-section-transition="diagonal"] {
  --section-transition-mask: var(--nb-shape-diagonal);
}

[data-section][data-section-transition="point"] {
  --section-transition-mask: var(--nb-shape-point);
}

/* Onda y zigzag se repiten con periodo fijado en % del ancho: asi el patron
   nunca se corta a medias en el borde derecho y tampoco se estira sin limite
   en pantallas anchas (antes eran el mismo poligono de segmentos rectos con
   distintas Y, por eso se veian iguales en el selector). */
[data-section][data-section-transition="wave"] {
  --section-transition-mask: var(--nb-shape-wave);
  --section-transition-mask-size: 20% var(--section-transition-h);
  --section-transition-mask-repeat: repeat-x;
}

[data-section][data-section-transition="zigzag"] {
  --section-transition-mask: var(--nb-shape-zigzag);
  --section-transition-mask-size: 20% var(--section-transition-h);
  --section-transition-mask-repeat: repeat-x;
}

@media (max-width: 680px) {
  [data-section][data-section-frame="inverted-point"] {
    padding-bottom: 116px !important;
  }

  [data-section][data-section-frame="arch"] {
    padding-top: 106px !important;
  }

  [data-section][data-section-frame="organic"] > .section-frame-surface {
    border-radius: 44px 88px 52px 72px / 70px 42px 86px 48px;
  }

  /* Con la altura en una variable basta bajarla aqui: la mascara, el relleno
     de la banda y el padding se recalculan solos. La regla de "fade" repite
     selector porque es mas especifica que la generica. */
  [data-section] {
    --section-transition-h: 54px;
  }

  [data-section][data-section-transition="fade"] {
    --section-transition-h: clamp(84px, 22vw, 120px);
  }

  [data-section][data-section-transition="wave"],
  [data-section][data-section-transition="zigzag"] {
    --section-transition-mask-size: 50% var(--section-transition-h);
  }
}

@media (min-width: 1400px) {
  [data-section][data-section-transition="wave"],
  [data-section][data-section-transition="zigzag"] {
    --section-transition-mask-size: 12.5% var(--section-transition-h);
  }
}