@charset "UTF-8";
/* ==========================================================================
   Control Ambiental Perú · hoja de estilo principal
   --------------------------------------------------------------------------
   Escrita contra el archivo de Figma "Control Ambiental — Web 2026"
   (NSEx0kaNRFLQMc7Xzh1Q3r): escritorio 1440 y móvil 390.

   Reglas de la casa, para que esto no se vuelva a degradar:
   · Cada elemento se declara UNA vez. Si algo hay que cambiar, se cambia
     donde está; no se añade una regla nueva al final del archivo.
   · Las coordenadas del archivo van en el comentario de cada sección.
   · El contenido cae en una retícula de 1312 (1440 − 64×2) en escritorio y
     de 342 (390 − 24×2) en móvil. Ese es el único margen lateral.
   · Se valida con assets/js/validador.js, no a ojo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Fuentes de marca (autohospedadas, sin Google Fonts)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Redonda";
  src: url("../fonts/redonda-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Redonda";
  src: url("../fonts/redonda-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Redonda";
  src: url("../fonts/redonda-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Redonda";
  src: url("../fonts/redonda-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2 · Tokens · variables del archivo (get_variable_defs) y manual de marca
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --ca-azul:        #003980;  /* surface/deep · text/strong   */
  --ca-azul-osc:    #00234F;
  --ca-azul-vivo:   #0062DB;  /* action/primary               */
  --ca-verde:       #00CF60;  /* brand/green-500              */
  --ca-verde-osc:   #00713A;  /* accent/on-light              */
  --ca-cian:        #00CDE6;  /* brand/cyan-400               */
  --ca-azul-tenue:  #A8C2E8;  /* text/on-dark-dim             */
  --ca-rojo:        #C0261C;

  --ca-negro:       #1A1A1A;
  --ca-gris-900:    #4D4D4D;  /* text/body                    */
  --ca-gris-700:    #6B6B6B;  /* text/muted                   */
  --ca-gris-500:    #808080;
  --ca-gris-300:    #D9D9D9;  /* surface/line                 */
  --ca-gris-100:    #F0F0F0;  /* surface/muted                */
  --ca-blanco:      #FFFFFF;  /* surface/base · text/on-dark  */

  /* Velo del hero: casi negro frío, no el azul de marca */
  --ca-velo: 8, 20, 34;

  /* Tipografía. Titulares en Redonda (manual de marca); el resto,
     Montserrat. El archivo de Figma está maquetado todo en Montserrat
     porque Redonda no estaba instalada al diseñarlo. */
  --ca-titulo: "Redonda", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --ca-sans:   "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ca-mono:   "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Retícula: 1312 de contenido + 64 de margen a cada lado = 1440 */
  --ca-ancho:  1360px;
  --ca-gutter: 24px;

  --ca-radio:  18px;
  /* Curva mas marcada que la de antes: arranca antes y frena mas largo.
     Como la usan veinte reglas, cambiarla aqui sube el tono de todos los
     :hover del sitio de una vez. Ver la seccion 30. */
  --ca-tr:     200ms cubic-bezier(.23, 1, .32, 1);
}

/* --------------------------------------------------------------------------
   3 · Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--ca-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ca-gris-900);
  background: var(--ca-blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--ca-titulo); font-weight: 300; line-height: 1.1; color: var(--ca-azul); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--ca-verde); color: var(--ca-azul-osc); }
:focus-visible { outline: 3px solid var(--ca-verde); outline-offset: 3px; border-radius: 4px; }

.ca-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ca-azul); color: #fff; padding: 14px 22px;
  font-size: 14px; font-weight: 600;
}
.ca-skip:focus { left: 0; }

.ca-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Variantes de texto por ancho: el archivo móvil acorta varios textos. */
.ca-solo-movil,
.ca-tarjeta-post.ca-solo-movil { display: none; }
@media (max-width: 640px) {
  .ca-solo-ancho { display: none; }
  .ca-solo-movil { display: inline; }
}

/* Aparición al hacer scroll */
/* La entrada de .ca-ap se define entera en la seccion 30 (Movimiento). */
.ca-ap.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ca-ap { opacity: 1; transform: none; } }

/* Sección genérica de las páginas internas. Las secciones de la portada
   declaran su propio padding más abajo y lo pisan. */
.ca-sec { padding-block: clamp(64px, 8vw, 120px); }
/* Las bandas que llevan curva o círculos deben recortarlos: si no, en móvil
   asoman por la derecha y aparece scroll lateral. */
.ca-rel { position: relative; overflow: hidden; }
.ca-mt-l { margin-top: 48px; }

.ca-oscuro { background: var(--ca-azul); color: var(--ca-blanco); }
.ca-oscuro h1, .ca-oscuro h2, .ca-oscuro h3, .ca-oscuro h4,
.ca-oscuro .ca-h1, .ca-oscuro .ca-h2, .ca-oscuro .ca-h3 { color: var(--ca-blanco); }
.ca-oscuro .ca-entrada { color: rgba(255,255,255,.82); }
.ca-oscuro .ca-btn--linea { color: var(--ca-blanco); }
.ca-oscuro .ca-btn--linea:hover { background: var(--ca-blanco); color: var(--ca-azul); }
.ca-oscuro .ca-flecha { color: var(--ca-verde); }
.ca-mas-oscuro { background: var(--ca-azul-osc); color: var(--ca-blanco); }
.ca-mas-oscuro h1, .ca-mas-oscuro h2, .ca-mas-oscuro h3,
.ca-mas-oscuro .ca-h1, .ca-mas-oscuro .ca-h2 { color: var(--ca-blanco); }
.ca-mas-oscuro .ca-entrada { color: rgba(255,255,255,.78); }

.ca-banda-cita { position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 130px); }
.ca-banda-cita .ca-entrada { margin-top: 30px; }
.ca-cita { font-family: var(--ca-titulo); font-weight: 300; font-size: clamp(32px, 4.44vw, 64px); line-height: 1.1; letter-spacing: -.03em; max-width: 20ch; }

.ca-cifras { display: grid; gap: 40px 32px; }
.ca-cifra b { display: block; margin-bottom: 12px; font-size: clamp(34px, 3.6vw, 44px); font-weight: 300; line-height: 1.045; letter-spacing: -.034em; }
.ca-cifra span { font-size: 14px; line-height: 1.5; opacity: .82; }

/* Recursos gráficos de fondo de las bandas oscuras. */
.ca-curva { position: absolute; inset-block-start: -12%; inset-inline-end: -8%; inline-size: min(52vw, 640px); aspect-ratio: 1; border-radius: 50% 50% 50% 0; background: currentColor; opacity: .06; pointer-events: none; }
.ca-circulos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ca-circulos::before,
.ca-circulos::after { content: ""; position: absolute; inline-size: 420px; block-size: 420px; inset-block-end: -170px; border-radius: 50%; border: 1px solid currentColor; opacity: .18; }
.ca-circulos::before { inset-inline-end: -120px; }
.ca-circulos::after { inset-inline-end: 100px; }

/* Cabecera de página interna: banda azul con el título y la entrada. */
.ca-cab { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 120px); background: var(--ca-azul); color: var(--ca-blanco); }
.ca-cab .ca-h1 { max-width: 17ch; color: var(--ca-blanco); }
.ca-cab .ca-entrada { margin-top: 24px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.611; color: rgba(255,255,255,.82); }
.ca-cab .ca-tag { color: var(--ca-azul-tenue); }
.ca-cab .ca-tag::before { background: var(--ca-verde); }
/* Valor por defecto: el titular va a 72 de su etiqueta, como en la portada.
   Se deja a la misma especificidad que las reglas por sección para que
   cualquiera de ellas (que van más abajo) lo pueda ajustar. */
.ca-tag + .ca-h1,
.ca-tag + .ca-h2,
.ca-tag + .ca-cita { margin-top: 72px; }
.ca-cab-sec { max-width: 760px; margin-bottom: 56px; }

.ca-serv { border-top: 1px solid var(--ca-gris-300); }
.ca-serv:first-of-type { border-top: 0; }
.ca-serv h2, .ca-serv .ca-h2 { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   4 · Retícula
   -------------------------------------------------------------------------- */
.ca-wrap {
  width: 100%;
  max-width: var(--ca-ancho);
  margin-inline: auto;
  padding-inline: var(--ca-gutter);
}

/* --------------------------------------------------------------------------
   5 · Escala tipográfica del archivo
   Escritorio: h1 84/90 · h2 44/52 · entrada 18/29 · cuerpo 16/27
   Móvil:      h1 32/38 · h2 30/36 · entrada 15/26
   -------------------------------------------------------------------------- */
.ca-h1 {
  font-size: 84px;
  line-height: 90px;
  letter-spacing: -.031em;
  font-weight: 300;
  color: var(--ca-blanco);
}
.ca-h1 strong { font-weight: 700; }

.ca-h2 {
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -.018em;
  font-weight: 300;
}
.ca-h2 strong { font-weight: 700; }

.ca-h3 { font-size: 26px; line-height: 32px; letter-spacing: -.015em; }

.ca-entrada { font-size: 16px; line-height: 27px; color: var(--ca-gris-900); }

/* Etiqueta en versalitas con el filete verde: el "ojo" del sistema.
   Escritorio: filete 4x64 en x=64, texto en x=88 (24 de sangría).
   Móvil:      filete 3x44 en x=24, texto en x=40 (16 de sangría). */
.ca-tag {
  position: relative;
  display: block;
  margin: 0;
  padding-left: 24px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--ca-gris-900);
}
.ca-tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 4px;
  height: 64px;
  background: var(--ca-verde);
}
.ca-tag--claro { color: var(--ca-azul-tenue); }
.ca-tag--verde { color: var(--ca-verde-osc); }

@media (max-width: 640px) {
  .ca-h1 { font-size: 32px; line-height: 38px; letter-spacing: -.022em; }
  .ca-h2 { font-size: 30px; line-height: 36px; }
  .ca-h3 { font-size: 20px; line-height: 26px; }
  .ca-entrada { font-size: 15px; line-height: 26px; }
  .ca-tag { padding-left: 16px; }
  .ca-tag::before { width: 3px; height: 44px; }
}

/* --------------------------------------------------------------------------
   6 · Botones y enlaces de acción
   Botón primario del archivo (89:27): 129x80, radio 15, texto 16 bold #00234F
   -------------------------------------------------------------------------- */
.ca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 34px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: .0125em;
  border: 0;
  border-radius: 15px;
  background: var(--ca-verde);
  color: var(--ca-azul-osc);
  transition: background var(--ca-tr), box-shadow var(--ca-tr);
}
.ca-btn:hover { background: #00b854; box-shadow: 0 12px 28px rgba(0,207,96,.28); }
.ca-btn[disabled], .ca-btn.is-cargando { opacity: .6; pointer-events: none; }
.ca-btn.is-cargando::after {
  content: ""; inline-size: 15px; block-size: 15px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: ca-giro .7s linear infinite;
}
@keyframes ca-giro { to { transform: rotate(360deg); } }

/* Azul de acción, para el envío del formulario (90:123) */
.ca-btn--azul { background: var(--ca-azul-vivo); color: #fff; border-radius: 8px; }
.ca-btn--azul:hover { background: #0052ba; box-shadow: 0 12px 28px rgba(0,98,219,.28); }
.ca-btn--ancho { inline-size: 100%; }

.ca-btn--linea {
  background: transparent;
  color: var(--ca-azul);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.ca-btn--linea:hover { background: var(--ca-azul); color: #fff; box-shadow: none; }

/* Enlace con flecha */
.ca-flecha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ca-azul-vivo);
  transition: color var(--ca-tr), gap var(--ca-tr);
}
.ca-flecha::after { content: "→"; }
.ca-flecha:hover { gap: 14px; color: var(--ca-azul-osc); }

/* --------------------------------------------------------------------------
   7 · Iconografía
   -------------------------------------------------------------------------- */
.ca-icono {
  display: inline-grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  flex: 0 0 auto;
  background: var(--ca-gris-100);
  color: var(--ca-azul);
  border-radius: 14px;
  transition: background var(--ca-tr);
}
.ca-icono svg { inline-size: 26px; block-size: 26px; }
.ca-icono--verde { background: var(--ca-verde); color: var(--ca-azul-osc); }
.ca-icono--claro { background: #fff; color: var(--ca-azul); }
.ca-icono--sm { inline-size: 48px; block-size: 48px; border-radius: 12px; }
.ca-icono--sm svg { inline-size: 22px; block-size: 22px; }

/* --------------------------------------------------------------------------
   8 · Cabecera
   Escritorio (88:27) · 1440x120 · fondo blanco · padding-inline 64
     logo 115.88x46 · nav 440 con gap 36 a 14/Medium · acciones gap 24
     tel: COMERCIAL mono 10 + (01) 421 8593 a 15/SemiBold azul
     CTA azul de acción, radio 11, 14/SemiBold · hairline gris en y=79
   Móvil (143:19) · 390x121 · fondo azul · logo negativo 91x52 · sólo el menú
   -------------------------------------------------------------------------- */
.ca-top {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--ca-blanco);
}
.ca-top__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 120px;
  position: relative;
}
.ca-top__int::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ca-gutter));
  right: calc(-1 * var(--ca-gutter));
  bottom: 0;
  height: 1px;
  background: var(--ca-gris-300);
}
.ca-logo { display: flex; align-items: center; }
.ca-logo img { width: 124px; height: 49px; object-fit: contain; }
/* Sólo la cabecera alterna logotipo; el del pie es siempre el negativo. */
.ca-top .ca-logo__img--negativo { display: none; }

.ca-nav ul { display: flex; align-items: center; gap: 36px; }
.ca-nav a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .007em;
  color: var(--ca-gris-900);
  transition: color var(--ca-tr);
}
.ca-nav a:hover,
.ca-nav .current-menu-item a { color: var(--ca-azul); }

.ca-top__acc { display: flex; align-items: center; gap: 24px; }
.ca-top__tel { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.ca-top__tel small {
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ca-gris-900);
}
.ca-top__tel a { font-size: 15px; line-height: 18px; font-weight: 600; letter-spacing: .013em; color: var(--ca-azul); }
.ca-top .ca-btn {
  padding: 14px 26px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  background: var(--ca-azul-vivo);
  color: var(--ca-blanco);
}
.ca-top .ca-btn:hover { background: #0052ba; }

.ca-burger {
  display: none;
  inline-size: 46px; block-size: 46px;
  background: transparent; border: 0; padding: 0; position: relative;
}
.ca-burger span {
  position: absolute; left: 11px; right: 11px; height: 2px;
  background: var(--ca-azul); border-radius: 2px;
  transition: transform var(--ca-tr), opacity var(--ca-tr);
}
.ca-burger span:nth-child(1) { top: 16px; }
.ca-burger span:nth-child(2) { top: 22px; }
.ca-burger span:nth-child(3) { top: 28px; }
.ca-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ca-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ca-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  .ca-burger { display: block; }
  .ca-top__tel { display: none; }
  .ca-nav {
    position: fixed;
    inset: 120px 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--ca-gris-300);
    padding: 12px var(--ca-gutter) 32px;
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform var(--ca-tr), visibility var(--ca-tr);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
  }
  .ca-nav.is-abierto { transform: none; visibility: visible; }
  .ca-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .ca-nav li { width: 100%; border-bottom: 1px solid var(--ca-gris-300); }
  .ca-nav a { display: block; padding: 16px 0; font-size: 17px; }
}

@media (max-width: 640px) {
  .ca-top { background: var(--ca-azul); }
  .ca-top__int { min-height: 121px; }
  .ca-top__int::after { display: none; }
  .ca-top .ca-logo__img--color { display: none; }
  .ca-top .ca-logo__img--negativo { display: block; width: 96px; height: 55px; }
  .ca-top__acc .ca-btn { display: none; }
  .ca-burger span { background: #fff; }
  .ca-nav { inset-block-start: 121px; max-height: calc(100dvh - 121px); }
}

/* --------------------------------------------------------------------------
   9 · Hero
   Escritorio (88:46) · 1440x1121
     foto a sangre · tres velos: natural 90° / superior 180° hasta 985 / natural
     filete 4x64 en y=148 · marca 152 y 176 · h1 352 (84/90, tres líneas)
     regla verde 150x3 en 662 · entrada 640 en 698 (18/29)
     CTA 129x80 en 829 · "Ver servicios" en x=336 y=847 + filete 214
     regla 560 en 929 · prueba social en 951 · controles 1312x48 en 1017
   Móvil (143:26) · 390x748 · foto 716 · filete 3x44 en 96 · h1 330 (32/38)
     regla 80x3 en 468 · entrada 492 · CTA 342x58 en 608 · barras en 688
   -------------------------------------------------------------------------- */
.ca-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: 1121px;
  overflow: hidden;
  background: var(--ca-azul-osc);
  color: var(--ca-blanco);
}
.ca-hero__slides { position: absolute; inset: 0; }
/* Antes se cambiaba de diapositiva con display:none/block: un corte seco
   entre dos fotos a pantalla completa. Ahora se cruzan. La activa ademas
   hace un acercamiento muy lento, que es lo que evita que un hero fijo
   parezca una captura de pantalla.
   visibility (y no solo opacity) saca las diapositivas ocultas del orden de
   tabulacion y del lector de pantalla. */
.ca-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 760ms var(--ca-e-sale), visibility 0s linear 760ms;
}
.ca-hero__slide.is-activo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 760ms var(--ca-e-sale);
}
.ca-hero__slide .ca-hero__foto { transform-origin: 50% 55%; }
.ca-hero__slide.is-activo .ca-hero__foto { animation: ca-acerca 9s linear both; }
@keyframes ca-acerca { from { transform: scale(1); } to { transform: scale(1.055); } }
.ca-hero__foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: var(--ca-azul-osc);
}
.ca-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(var(--ca-velo), .80) 0%,
      rgba(var(--ca-velo), .52) 34%,
      rgba(var(--ca-velo), .20) 68%,
      rgba(var(--ca-velo), .05) 100%),
    linear-gradient(180deg,
      rgba(var(--ca-velo), .50) 0%,
      rgba(var(--ca-velo), .18) 48.3%,
      rgba(var(--ca-velo), 0) 87.9%);
}

/* El contenido se ancla a las coordenadas del archivo. El bloque de
   referencia de un absoluto es el padding box, así que el margen lateral
   se aplica con inset-inline (no con left:0, que lo perdería). */
.ca-hero__int {
  position: relative;
  z-index: 2;
  block-size: 1121px;
  width: 100%;
}
.ca-hero__int > * { position: absolute; inset-inline: var(--ca-gutter); margin: 0; }

.ca-hero__marca {
  inset-block-start: 152px;
  display: grid;
  gap: 10px;
  padding-left: 24px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 14px;
  text-transform: uppercase;
}
.ca-hero__marca::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 4px;
  height: 64px;
  background: var(--ca-verde);
}
.ca-hero__empresa { color: var(--ca-blanco); }
.ca-hero__linea { color: var(--ca-cian); }

.ca-hero .ca-h1 { inset-block-start: 352px; }
.ca-hero__filete { inset-block-start: 662px; inset-inline-end: auto; display: block; inline-size: 150px; block-size: 3px; background: var(--ca-verde); }
.ca-hero .ca-entrada {
  inset-block-start: 698px;
  inset-inline-end: auto;
  inline-size: 640px;
  font-size: 18px;
  line-height: 29px;
  color: var(--ca-blanco);
}
.ca-hero__acc { inset-block-start: 829px; display: flex; align-items: flex-start; gap: 143px; }
.ca-hero__acc .ca-btn { block-size: 80px; padding-block: 0; }
.ca-hero__enlace {
  margin-block-start: 18px;
  padding-bottom: 26px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .0125em;
  color: var(--ca-blanco);
  background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)) 0 100% / 214px 1px no-repeat;
}
.ca-hero__enlace:hover { background-image: linear-gradient(var(--ca-verde), var(--ca-verde)); }

.ca-hero__marcas {
  inset-block-start: 929px;
  inset-inline-end: auto;
  inline-size: 560px;
  padding-block-start: 22px;
  border-top: 1px solid rgba(255,255,255,.28);
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .145em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}

/* Controles del carrusel (124:52) */
.ca-hero__nav {
  position: absolute;
  z-index: 2;
  inset-block-end: 56px;
  inset-inline: max(var(--ca-gutter), calc((100% - 1312px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}
.ca-hero__prog { display: flex; align-items: center; gap: 16px; }
.ca-hero__barra { inline-size: 14px; block-size: 4px; border-radius: 2px; background: rgba(255,255,255,.38); transition: inline-size var(--ca-tr), background var(--ca-tr); }
.ca-hero__barra.is-activa { inline-size: 44px; background: var(--ca-verde); }
.ca-hero__contador {
  margin-left: 16px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.72);
}
.ca-hero__botones { display: flex; gap: 8px; }
.ca-hero__botones button {
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255,255,255,.9);
  border-radius: 24px;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  transition: background var(--ca-tr);
}
.ca-hero__botones button:hover { background: rgba(255,255,255,.12); }
.ca-hero__pausa { position: relative; font-size: 0; color: transparent; }
.ca-hero__pausa::before,
.ca-hero__pausa::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 3px; height: 13px; background: #fff;
}
.ca-hero__pausa::before { left: 19px; }
.ca-hero__pausa::after { left: 26px; }
.ca-hero__pausa.is-pausado::after { display: none; }
.ca-hero__pausa.is-pausado::before {
  left: 19px; width: 0; height: 0; background: transparent;
  border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}

@media (max-width: 1023px) {
  .ca-hero { min-height: min(1121px, calc(100svh - 120px)); }
  .ca-hero__int { block-size: auto; padding-block: 148px 96px; }
  .ca-hero__int > * { position: static; inset: auto; inline-size: auto; }
  .ca-hero .ca-h1 { margin-top: 118px; }
  .ca-hero__filete { margin: 40px 0 34px; }
  .ca-hero .ca-entrada { inline-size: auto; max-width: 640px; }
  .ca-hero__acc { margin-top: 40px; gap: 32px; }
  .ca-hero__marcas { margin-top: 44px; inline-size: auto; max-width: 560px; }
  .ca-hero__nav { inset-block-end: 40px; }
}

@media (max-width: 640px) {
  .ca-hero { min-height: 748px; background: var(--ca-blanco); }
  .ca-hero__slides { block-size: 716px; }
  /* Curva medida contra el archivo por franjas de luminancia: en móvil el
     velo es mucho más cerrado en la mitad superior que en escritorio. */
  .ca-hero::after {
    inset-block-end: 32px;
    background: linear-gradient(180deg,
      rgba(var(--ca-velo), .88) 0%,
      rgba(var(--ca-velo), .80) 12%,
      rgba(var(--ca-velo), .74) 22%,
      rgba(var(--ca-velo), .66) 32%,
      rgba(var(--ca-velo), .52) 42%,
      rgba(var(--ca-velo), .34) 52%,
      rgba(var(--ca-velo), .38) 70%,
      rgba(var(--ca-velo), .32) 100%);
  }
  /* El archivo encuadra la foto por el centro, no por el tercio superior. */
  .ca-hero__foto { background-position: 46% 51%; }
  .ca-hero__int { block-size: 748px; padding-block: 0; }
  .ca-hero__int > * { position: absolute; inset-inline: var(--ca-gutter); margin: 0; }
  .ca-hero .ca-hero__marca { inset-block-start: 100px; margin: 0; gap: 6px; padding-left: 16px; }
  .ca-hero .ca-hero__marca::before { width: 3px; height: 44px; top: 4px; }
  .ca-hero .ca-h1 { inset-block-start: 330px; margin: 0; }
  /* Con inset-inline puestos, un ancho fijo se ignora: hay que soltar
     el borde derecho para que el filete mida sus 80. */
  .ca-hero .ca-hero__filete { inset-block-start: 468px; inset-inline-end: auto; margin: 0; inline-size: 80px; }
  .ca-hero .ca-entrada { inset-block-start: 492px; margin: 0; inline-size: auto; font-size: 15px; line-height: 26px; }
  .ca-hero .ca-hero__acc { inset-block-start: 608px; margin: 0; flex-direction: column; align-items: stretch; gap: 0; }
  .ca-hero__acc .ca-btn { block-size: 58px; padding-block: 0; border-radius: 16px; }
  .ca-hero__enlace, .ca-hero__marcas, .ca-hero__botones { display: none; }
  .ca-hero__nav { inset-block-end: 34px; inset-inline: var(--ca-gutter); justify-content: flex-start; }
  .ca-hero__prog { gap: 12px; }
  .ca-hero__barra { inline-size: 10px; }
  .ca-hero__barra.is-activa { inline-size: 32px; }
  .ca-hero__contador { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   10 · Franja de credenciales
   Escritorio (88:58) · 1440x96 · fondo azul · cuatro columnas en
     x=64/392/720/1048 con reglas de 1x40 en 352/680/1008
     etiqueta mono 11 cian en y=30 · valor 16/SemiBold blanco en y=50
   Móvil (143:43) · 390x180 · dos columnas de 159 en x=24 y 195
   -------------------------------------------------------------------------- */
.ca-cred { background: var(--ca-azul); color: var(--ca-blanco); }
.ca-cred ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 26 abajo y no 30: el archivo cierra la franja en 96 con el valor
     terminando en 70. */
  padding-block: 30px 26px;
  min-height: 96px;
  align-content: start;
}
.ca-cred li { position: relative; padding-right: 24px; }
.ca-cred li + li::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -2px;
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.3);
}
.ca-cred small {
  display: block;
  margin-bottom: 7px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ca-cian);
}
/* En bloque: como inline la caja de línea metía 3px de más y el valor caía
   en 53 en vez de en los 50 del archivo. */
.ca-cred b { display: block; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: .006em; }
.ca-cred__corto { display: none; }

@media (max-width: 900px) {
  .ca-cred ul { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .ca-cred li + li::before { display: none; }
}
@media (max-width: 640px) {
  .ca-cred ul { grid-template-columns: 159px 159px; grid-auto-rows: 50px; padding-block: 32px 24px; }
  .ca-cred small { margin-bottom: -3px; line-height: 14px; }
  .ca-cred b { font-size: 15px; line-height: 17px; }
  .ca-cred__largo { display: none; }
  .ca-cred__corto { display: inline; }
}

/* --------------------------------------------------------------------------
   11 · Lo que hacemos
   Escritorio (140:27) · 1440x1421 · fondo blanco
     filete 4x64 en y=288 · h2 en 378 · bajada 480 en x=880 y=432
     fotos y=584 h=440: 864 + 1 + 447 · malla de tarjetas y=1025 h=299
   Móvil (145:17) · 390x1655 · bloque azul de 1016 · fotos apiladas
     342x330 y 342x316 · fichas con icono de 48 y texto en x=88
   -------------------------------------------------------------------------- */
.ca-hacemos { background: var(--ca-blanco); padding-block: 292px 97px; }
.ca-hacemos__cab { display: grid; grid-template-columns: minmax(0, 816fr) minmax(0, 496fr); align-items: start; }
.ca-hacemos__titulo { grid-column: 1; }
.ca-hacemos .ca-h2 { margin-top: 72px; }
.ca-hacemos__bajada { grid-column: 2; margin: 140px 0 0; max-width: 480px; font-size: 16px; line-height: 27px; }

.ca-hacemos__fotos {
  display: grid;
  border-start-start-radius: 28px;
  border-start-end-radius: 28px;
  overflow: hidden;
  grid-template-columns: minmax(0, 864fr) minmax(0, 447fr);
  gap: 1px;
  margin-top: 67px;
  aspect-ratio: 1312 / 440;
}
.ca-hfoto {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 36px 32px;
  overflow: hidden;
  color: var(--ca-blanco);
  background: #12212f center / cover no-repeat;
}
.ca-hfoto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8,20,34,.10) 0%, rgba(8,20,34,.22) 42%, rgba(8,20,34,.72) 78%, rgba(8,20,34,.90) 100%);
}
.ca-hfoto__num {
  position: absolute;
  top: 36px;
  left: 36px;
  font-family: var(--ca-mono);
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .2em;
}
.ca-hfoto__tit { margin: 0; font-family: var(--ca-titulo); font-weight: 700; font-size: 26px; line-height: 32px; letter-spacing: -.015em; color: var(--ca-blanco); }
.ca-hfoto__desc { margin: 16px 0 0; max-width: 420px; font-size: 15px; line-height: 24px; color: rgba(255,255,255,.86); }
.ca-hfoto:not(.ca-hfoto--ancha) .ca-hfoto__desc { max-width: 375px; }

.ca-hacemos__tarjetas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1px;
  background: var(--ca-gris-300);
  border: 1px solid var(--ca-gris-300);
  border-end-start-radius: 28px;
  border-end-end-radius: 28px;
  overflow: hidden;
}
.ca-htar { display: flex; flex-direction: column; min-height: 299px; padding: 36px 32px; background: var(--ca-blanco); }
.ca-htar__num { margin: 26px 0 0; font-family: var(--ca-mono); font-weight: 600; font-size: 10px; line-height: 13px; letter-spacing: .2em; color: var(--ca-gris-900); }
.ca-htar__tit { margin: 7px 0 0; font-family: var(--ca-titulo); font-weight: 700; font-size: 18px; line-height: 24px; color: var(--ca-azul); }
.ca-htar__desc { margin: 38px 0 0; font-size: 13.5px; line-height: 21px; color: var(--ca-gris-900); }

@media (max-width: 900px) {
  .ca-hacemos { padding-block: 96px 64px; }
  .ca-hacemos__cab { grid-template-columns: 1fr; }
  .ca-hacemos .ca-h2 { margin-top: 40px; }
  .ca-hacemos__bajada { grid-column: 1; margin: 28px 0 0; max-width: none; }
  .ca-hacemos__fotos { grid-template-columns: 1fr; aspect-ratio: auto; margin-top: 48px; }
  .ca-hacemos__tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-hfoto { min-height: 360px; padding: 28px; }
  .ca-hfoto__num { top: 28px; left: 28px; }
}

@media (max-width: 640px) {
  .ca-hacemos { position: relative; isolation: isolate; padding-block: 0 40px; }
  .ca-hacemos::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1016px;
    background: var(--ca-azul);
    z-index: -1;
  }
  /* Móvil (145:17) · 390x1655 · las dos fotos se apilan sin aire: en el
     archivo la segunda tapa a la primera desde y=700. */
  .ca-hacemos__cab { padding-block-start: 180px; }
  .ca-hacemos .ca-tag { color: var(--ca-verde); }
  .ca-hacemos .ca-h2 { margin-top: 58px; color: var(--ca-blanco); }
  /* El archivo movil no traia esta bajada, pero el cliente la quiere tambien
     en movil. Cae sobre la banda azul de la seccion, asi que va en claro con
     el mismo tono que usa .ca-cab .ca-entrada sobre azul. */
  .ca-hacemos__bajada { margin-top: 22px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 25px; }

  .ca-hacemos__fotos { margin-top: 20px; gap: 0; grid-template-columns: 1fr; aspect-ratio: auto; }
  .ca-hfoto { min-height: 330px; block-size: 330px; padding: 22px 22px 34px; border-radius: 0; }
  .ca-hfoto:not(.ca-hfoto--ancha) { min-height: 316px; block-size: 316px; padding-bottom: 20px; }
  .ca-hfoto__num { top: 22px; left: 22px; }
  .ca-hfoto__tit { font-size: 20px; line-height: 26px; }
  .ca-hfoto__desc { margin-top: 12px; max-width: none; font-size: 15px; line-height: 26px; }

  .ca-hacemos__tarjetas {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 48px;
    background: none;
    border: 0;
    border-top: 1px solid var(--ca-gris-300);
  }
  .ca-htar {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 16px;
    align-items: start;
    min-height: 0;
    padding: 22px 0 26px;
    background: none;
    border-bottom: 1px solid var(--ca-gris-300);
  }
  .ca-htar__icono { grid-column: 1; grid-row: 1 / span 3; }
  .ca-htar__icono .ca-icono { inline-size: 48px; block-size: 48px; border-radius: 12px; }
  .ca-htar__icono .ca-icono svg { inline-size: 22px; block-size: 22px; }
  .ca-htar__num  { grid-column: 2; margin: 2px 0 0; }
  .ca-htar__tit  { grid-column: 2; margin: 4px 0 0; font-size: 16px; line-height: 21px; }
  .ca-htar__desc { grid-column: 2; margin: 23px 0 0; font-size: 14px; line-height: 19px; }
}

/* --------------------------------------------------------------------------
   12 · Lo que recibimos
   Escritorio (141:17) · 1440x740 · banda #d9d9d9 de 662 sobre #f0f0f0
     filete en y=88 · h2 en 178 · bajada en 310 · cápsulas desde 372
     foto 680x700 anclada a la derecha con arco de 280 y contador dentro
   Móvil (145:68) · 390x1026 · foto a sangre de 340 · cápsulas de 51
   -------------------------------------------------------------------------- */
.ca-recibimos { position: relative; isolation: isolate; min-block-size: 740px; background: var(--ca-gris-100); padding-block: 92px 40px; overflow: hidden; }
.ca-recibimos::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 662px; background: var(--ca-gris-300); z-index: -1; }
.ca-recibimos .ca-wrap { position: static; }
.ca-recibimos__col { max-width: 696px; }
.ca-recibimos .ca-h2 { margin-top: 72px; }
.ca-recibimos__bajada { margin: 28px 0 0; max-width: 560px; font-size: 16px; line-height: 27px; }

.ca-pills { display: flex; flex-wrap: wrap; gap: 13px 14px; margin-top: 37px; max-width: 640px; }
.ca-pills li {
  display: inline-flex;
  align-items: center;
  min-block-size: 51px;
  /* 24 y no 26: Montserrat en navegador es más ancha y cada píldora salía
     3px más larga, desplazando a la siguiente. */
  padding: 0 24px;
  border: 1.5px solid var(--ca-gris-300);
  border-radius: 999px;
  background: var(--ca-blanco);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .007em;
  color: var(--ca-azul);
  transition: border-color var(--ca-tr);
}
.ca-pills li:hover { border-color: var(--ca-verde); }

.ca-recibimos__foto {
  position: absolute;
  z-index: 1;
  isolation: isolate;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 47.222%;
  block-size: 700px;
  border-start-start-radius: 280px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 60px 58px;
  color: var(--ca-blanco);
}
.ca-recibimos__foto img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 35%; z-index: -2; }
.ca-recibimos__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,35,79,.12) 0%, rgba(0,35,79,.30) 45%, rgba(0,35,79,.92) 100%);
}
.ca-recibimos__cifra { display: block; font-family: var(--ca-titulo); font-weight: 700; font-size: 88px; line-height: 92px; letter-spacing: -.034em; }
.ca-recibimos__filete { display: block; inline-size: 120px; block-size: 3px; background: var(--ca-verde); margin: 20px 0 24px; }
.ca-recibimos__pie { margin: 0; font-family: var(--ca-mono); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: .2em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .ca-recibimos__foto { block-size: 600px; border-start-start-radius: 200px; padding: 0 40px 44px; }
  .ca-recibimos__cifra { font-size: 64px; line-height: 68px; }
}
@media (max-width: 900px) {
  .ca-recibimos { padding-block: 64px 0; }
  .ca-recibimos::before { block-size: 100%; }
  .ca-recibimos__col { max-width: none; }
  .ca-recibimos .ca-h2 { margin-top: 40px; }
  .ca-recibimos__bajada { margin-top: 24px; }
  .ca-recibimos__foto { position: relative; inline-size: auto; block-size: 420px; margin: 56px calc(-1 * var(--ca-gutter)) 0; border-start-start-radius: 140px; padding: 0 28px 36px; }
}
@media (max-width: 640px) {
  /* Móvil (145:68) · 390x1026 · cápsulas de 51 con 10 de aire · foto a
     sangre de 340 en y=638. */
  .ca-recibimos { padding-block: 60px 76px; }
  .ca-recibimos .ca-h2 { margin-top: 54px; line-height: 37px; }
  .ca-recibimos__bajada { display: none; }
  .ca-pills { margin-top: 39px; gap: 10px; }
  /* Con 18 de aire «Grasas de trampa» y «Otros biodegradables» ya no caben
     en la misma fila y la lista crece una fila de más. */
  .ca-pills li { block-size: 51px; padding: 0 16px; font-size: 13px; }
  /* El archivo deja 20 entre la primera y la segunda fila, y 10 en el resto. */
  .ca-pills li:nth-child(4) { margin-top: 10px; }
  .ca-recibimos__foto { block-size: 340px; margin-top: 55px; border-start-start-radius: 0; padding: 0 24px 18px; }
  .ca-recibimos__cifra { font-size: 44px; line-height: 50px; }
  .ca-recibimos__filete { inline-size: 72px; margin: 14px 0 13px; }
}

/* --------------------------------------------------------------------------
   13 · Franja de clientes
   Escritorio (150:32) · 1440x704 · hairline superior · cabecera a dos
     columnas (titular en x=64, bajada 440 en x=936 y=232)
     malla 1312x264 en y=344, radio 24 · celdas de 131 · logos 158x75
   Móvil (151:32) · 390x808 · malla 342x368 · celdas 113x91 · logos 78x37
   -------------------------------------------------------------------------- */
.ca-clientes-sec { background: var(--ca-blanco); border-top: 1px solid var(--ca-gris-300); padding-block: 92px 44px; }
/* Sin max-width: .ca-cab-sec lo limita a 760 y la columna derecha caía en
   569 en vez de en los 936 del archivo. */
.ca-cab-sec--dos { display: grid; max-width: none; grid-template-columns: minmax(0, 872fr) minmax(0, 440fr); align-items: start; }
.ca-cab-sec--dos .ca-h2 { margin-top: 72px; }
.ca-cab-sec--dos > p { margin: 139px 0 0; max-width: 440px; font-size: 16px; line-height: 27px; }

.ca-clientes {
  display: grid;
  gap: 1px;
  margin-top: 58px;
  background: var(--ca-gris-300);
  border: 1px solid var(--ca-gris-300);
  border-radius: 24px;
  overflow: hidden;
}
.ca-clientes__fila { display: grid; gap: 1px; }
.ca-clientes__fila--seis  { grid-template-columns: repeat(6, 1fr); }
.ca-clientes__fila--cinco { grid-template-columns: repeat(5, 1fr); }
.ca-clientes li { display: grid; place-items: center; block-size: 131px; padding: 22px; background: var(--ca-blanco); }
.ca-clientes img { max-block-size: 75px; max-inline-size: min(158px, 100%); inline-size: auto; object-fit: contain; transition: transform var(--ca-tr); }
.ca-clientes li:hover img { transform: scale(1.04); }

/* 28 de hueco: el archivo pone el crédito a 636 y la malla cierra en 608. */
.ca-fuente { margin-top: 28px; font-family: var(--ca-mono); font-weight: 400; font-size: 10px; line-height: 14px; letter-spacing: .12em; color: var(--ca-gris-900); }

@media (max-width: 900px) {
  .ca-clientes-sec { padding-block: 64px; }
  .ca-cab-sec--dos { grid-template-columns: 1fr; }
  .ca-cab-sec--dos .ca-h2 { margin-top: 40px; }
  .ca-cab-sec--dos > p { margin: 24px 0 0; max-width: none; }
  .ca-clientes { margin-top: 48px; }
  .ca-clientes__fila--seis, .ca-clientes__fila--cinco { grid-template-columns: repeat(3, 1fr); }
  .ca-clientes li { block-size: 108px; padding: 16px; }
}
@media (max-width: 640px) {
  /* Móvil (151:32) · 390x808 · malla de 3 columnas de 113x91 y última fila
     de dos celdas de 170. */
  .ca-clientes-sec { padding-block: 60px 48px; }
  .ca-cab-sec--dos .ca-h2 { margin-top: 54px; }
  .ca-cab-sec--dos > p { margin-top: 55px; font-size: 16px; line-height: 26px; }
  .ca-clientes { margin-top: 34px; }
  .ca-clientes li { block-size: 91px; padding: 10px; }
  .ca-clientes img { max-block-size: 37px; max-inline-size: min(78px, 100%); }
  .ca-fuente { margin-top: 20px; }
}

/* --------------------------------------------------------------------------
   14 · Banda de la planta
   Escritorio (90:68) · 1440x640 · foto a sangre con degradado horizontal
     .95 → .66 · filete en y=96 · h2 en 196 · texto 520 en 344
     enlace en 436 con filete de 268 · sello mono cian en 510
     panel de etapas de 400 en x=940, escalonado desde 196/280/364
   Móvil (146:62) · 390x750 · foto 645 · panel a sangre · enlace al final
   -------------------------------------------------------------------------- */
/* La banda mide 640, pero la foto y el velo sólo cubren los primeros 560:
   los 80 de abajo son fondo de página. */
.ca-planta { position: relative; isolation: isolate; overflow: hidden; background: var(--ca-blanco); color: var(--ca-blanco); min-block-size: 640px; padding-block: 100px 0; }
.ca-planta__foto { position: absolute; inset: 0 0 auto; z-index: 0; inline-size: 100%; block-size: 560px; object-fit: cover; object-position: center; }
/* planta.webp ya lleva el recorte del archivo (la foto vertical comprimida
   en el marco apaisado), así que aquí basta con cubrir. */
/* Recurso de marca (90:89): cápsulas de 300x300 en x=1080 y=300, al 22 %. */
.ca-planta__trama {
  position: absolute;
  z-index: 1;
  inset-block-start: 300px;
  inset-inline-start: max(1080px, calc(50% - 720px + 1080px));
  inline-size: 300px;
  block-size: 300px;
  opacity: .22;
  color: var(--ca-verde);
  pointer-events: none;
}
.ca-planta__trama svg { inline-size: 210px; block-size: 234px; margin: 12px; }
.ca-planta::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 560px;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,35,79,.95) 0%, rgba(0,35,79,.70) 45%, rgba(0,35,79,.66) 100%);
}
.ca-planta__int { position: relative; z-index: 2; display: grid; grid-template-columns: 812px 400px; gap: 64px; justify-content: start; align-items: start; }
.ca-planta .ca-tag { color: var(--ca-azul-tenue); }
.ca-planta .ca-h2 { margin-top: 82px; line-height: 56px; color: var(--ca-blanco); }
.ca-planta__texto { margin: 36px 0 0; max-width: 520px; font-size: 17px; line-height: 28px; color: var(--ca-blanco); }
/* El archivo pone «Ver la planta» en y=436 dando por hecho que la bajada
   ocupa tres lineas, pero ocupa cuatro y termina en 456: en el propio export
   de Figma el enlace pisa «producto terminado». Con -20px aqui salia igual de
   pisado. Baja a 468 y el sello se recoloca para que el credito siga cayendo
   en el 510 del archivo y la seccion no cambie de alto. */
.ca-planta__enlace { display: block; inline-size: max-content; margin-top: 12px; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: .0125em; color: var(--ca-verde); }
.ca-planta__enlace::after { content: ""; display: block; inline-size: 268px; max-inline-size: 100%; block-size: 1px; background: var(--ca-verde); margin-top: 10px; }
.ca-planta__enlace:hover { color: var(--ca-blanco); }
.ca-planta__enlace:hover::after { background: var(--ca-blanco); }
.ca-planta__sello { margin: 11px 0 0; font-family: var(--ca-mono); font-weight: 400; font-size: 10px; line-height: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--ca-cian); }

/* Panel de etapas (90:79) · 940,196 · 400x232 en tres filas de 77,33.
   La regla blanca del archivo va 20 por debajo del panel, no pegada. */
.ca-planta__etapas { display: grid; margin-top: 96px; }
.ca-planta__etapas::after { content: ""; display: block; block-size: 1px; margin-top: 20px; background: rgba(255,255,255,.28); }
/* Las bandas del archivo no son iguales: 84, 84 y 64, con el texto a 22
   del borde superior de cada una. */
.ca-planta__etapas li { display: flex; align-items: flex-start; gap: 32px; block-size: 84px; padding: 22px 0 0; }
.ca-planta__etapas li:nth-child(3) { block-size: 64px; }
.ca-planta__etapas small { margin-top: 4px; }
.ca-planta__etapas li:nth-child(1) { background: rgba(255,255,255,.14); }
.ca-planta__etapas li:nth-child(2) { background: rgba(255,255,255,.22); }
.ca-planta__etapas li:nth-child(3) { background: rgba(255,255,255,.30); }
.ca-planta__etapas small { font-family: var(--ca-mono); font-weight: 500; font-size: 12px; letter-spacing: .117em; color: var(--ca-verde); }
.ca-planta__etapas strong { font-size: 18px; font-weight: 600; letter-spacing: -.006em; color: var(--ca-blanco); }

@media (max-width: 900px) {
  .ca-planta { padding-block: 64px; }
  .ca-planta__int { grid-template-columns: 1fr; }
  .ca-planta .ca-h2 { margin-top: 40px; }
  .ca-planta__etapas { margin-top: 48px; }
}
@media (max-width: 640px) {
  /* Móvil (146:62) · 390x750 · foto y velo hasta 645 · etapas 24→366
     en bandas de 72, 72 y 61 · enlace suelto debajo, ya sobre blanco. */
  .ca-planta { min-block-size: 750px; padding-block: 60px 0; }
  .ca-planta__foto, .ca-planta::after { block-size: 645px; }
  .ca-planta__trama { display: none; }
  .ca-planta__int { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ca-planta__int > div { display: contents; }
  .ca-planta .ca-h2 { margin-top: 58px; line-height: 36px; }
  .ca-planta__texto { margin-top: 20px; font-size: 16px; line-height: 26px; }
  .ca-planta__etapas { order: 2; margin: 40px 0 0; }
  .ca-planta__etapas::after { display: block; margin-top: 11px; }
  .ca-planta__etapas li { block-size: 72px; gap: 25px; padding: 21px 0 0; }
  .ca-planta__etapas li:nth-child(3) { block-size: 61px; }
  .ca-planta__etapas small { margin-top: 3px; }
  .ca-planta__etapas strong { font-size: 17px; line-height: 20px; }
  .ca-planta__enlace { order: 3; margin-top: 14px; line-height: 44px; color: var(--ca-azul-vivo); }
  .ca-planta__enlace::after { display: none; }
  .ca-planta__sello { display: none; }
}

/* --------------------------------------------------------------------------
   15 · Blog
   Escritorio (216:32) · 1440x777 · fondo #f0f0f0 · filete en y=88
     h2 en 178 · bajada 640 en 300 · "Ver todo" en x=1160 y=196 con filete
     tarjetas 413x341 en y=340, radio 16, foto de 180, texto a 24
   Móvil (216:54) · 390x1410 · tarjetas 342x329 · "Ver todo" al final
   -------------------------------------------------------------------------- */
.ca-blog { background: var(--ca-gris-100); padding-block: 92px 96px; min-block-size: 777px; }
.ca-blog .ca-tag { color: var(--ca-verde-osc); }
.ca-blog__cab { display: grid; grid-template-columns: minmax(0, 1096fr) minmax(0, 216fr); align-items: start; }
.ca-blog__cab .ca-h2 { margin: 72px 0 0; max-width: 20ch; }
.ca-blog__bajada { margin: 18px 0 0; max-width: 640px; font-size: 16px; line-height: 26px; }
.ca-blog__todo {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: start;
  margin-top: 104px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ca-azul-vivo);
}
.ca-blog__todo::after { content: ""; display: block; inline-size: 154px; block-size: 2px; background: var(--ca-verde); margin-top: 8px; }
.ca-blog__todo:hover { color: var(--ca-azul-osc); }

.ca-blog__rejilla { display: grid; grid-template-columns: repeat(3, 413px); gap: 25px; justify-content: start; margin-top: 0; }
.ca-post { display: flex; flex-direction: column; background: var(--ca-blanco); border-radius: 16px; overflow: hidden; padding-bottom: 30px; }
.ca-post__img { display: block; aspect-ratio: 413 / 180; background: var(--ca-gris-300); overflow: hidden; }
.ca-post__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.6,.3,1); }
.ca-post:hover .ca-post__img img { transform: scale(1.04); }
.ca-post__cat { display: block; margin: 24px 24px 0; font-family: var(--ca-mono); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: .145em; text-transform: uppercase; color: var(--ca-verde-osc); }
.ca-post h3 { margin: 14px 24px 0; font-family: var(--ca-titulo); font-weight: 300; font-size: 20px; line-height: 27px; color: var(--ca-azul); }
.ca-post p { margin: 12px 24px 0; font-size: 14px; line-height: 22px; color: var(--ca-gris-700); }
.ca-post .ca-flecha { margin: 24px 24px 0; font-size: 14px; }

@media (max-width: 900px) {
  .ca-blog { padding-block: 64px; }
  .ca-blog__cab { grid-template-columns: 1fr; }
  .ca-blog__cab .ca-h2 { margin-top: 40px; }
  .ca-blog__todo { grid-column: 1; grid-row: auto; margin-top: 28px; }
  .ca-blog__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 640px) {
  /* Móvil (216:54) · 390x1410 · fichas de 342 apiladas con 20 de aire. */
  .ca-blog { padding-block: 58px 50px; }
  /* El enlace va al final de la sección (216:74): el cab se disuelve
     para poder ordenarlo con el resto. */
  .ca-blog .ca-wrap { display: flex; flex-direction: column; }
  .ca-blog__cab { display: contents; }
  .ca-blog .ca-h2 { margin-top: 52px; line-height: 38px; }
  .ca-blog__bajada { margin-top: 14px; font-size: 16px; line-height: 24px; }
  .ca-blog__rejilla { order: 2; grid-template-columns: 1fr; gap: 20px; margin-top: 12px; }
  .ca-blog__todo { order: 3; margin-top: 11px; line-height: 44px; }
  .ca-post__img { aspect-ratio: 342 / 170; }
  .ca-post__cat { margin: 24px 20px 0; }
  .ca-post h3 { margin: 10px 20px 0; font-size: 19px; line-height: 25px; }
  .ca-post p { margin: 10px 20px 0; }
  .ca-post { padding-bottom: 41px; }
  .ca-post .ca-flecha { margin: 2px 20px 0; }
}

/* --------------------------------------------------------------------------
   16 · Cotización
   Escritorio (90:99) · 1440x724 · hairline superior · filete en y=88
     columna izquierda hasta x=532 con separador vertical de 548
     datos de contacto desde y=452 · formulario a dos columnas en 600 y 1004
     campos: etiqueta 13 + valor 20 + regla de 372 · botón 776x58 en y=470
   Móvil (146:81) · 390x1107 · sin bajada · datos debajo del botón
   -------------------------------------------------------------------------- */
.ca-cot { border-top: 1px solid var(--ca-gris-300); padding-block: 92px 112px; }
/* Columnas del archivo: texto 64→464 (400), separador en 532, formulario
   600→1376 (776). Con el contenido en 1312, el hueco entre columnas es 136. */
.ca-cot__int { display: grid; grid-template-columns: minmax(0, 400fr) minmax(0, 776fr); column-gap: calc(136 / 1312 * 100%); position: relative; }
.ca-cot__int::before {
  content: "";
  position: absolute;
  left: calc(468 / 1312 * 100%);
  top: -4px;
  width: 1px;
  height: 548px;
  background: var(--ca-gris-300);
}
.ca-cot .ca-h2 { margin-top: 72px; }
.ca-cot .ca-entrada { margin-top: 29px; max-width: 400px; line-height: 27px; }

.ca-datos { display: grid; gap: 26px; margin-top: 27px; padding-top: 32px; border-top: 1px solid var(--ca-gris-300); }
.ca-dato { margin: 0; }
.ca-dato small {
  display: block;
  margin-bottom: 0;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ca-gris-500);
}
.ca-dato strong { display: block; margin-top: 5px; font-size: 15px; font-weight: 600; line-height: 18px; color: var(--ca-azul); overflow-wrap: anywhere; }

.ca-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 33px 32px; align-content: start; }
.ca-campo { position: relative; display: flex; flex-direction: column; margin: 0; }
/* El archivo separa 22 la fila ancha, no 33: la ayuda del distrito cuelga
   fuera del flujo y no debe empujar la fila siguiente. */
.ca-campo--ancho { grid-column: 1 / -1; margin-top: 14px; }
.ca-campo label {
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ca-gris-900);
  margin-bottom: 9px;
}
.ca-campo label .req { color: var(--ca-azul-vivo); }
.ca-campo input,
.ca-campo select,
.ca-campo textarea {
  font-family: var(--ca-sans);
  font-size: 16px;
  line-height: 20px;
  color: var(--ca-azul-osc);
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--ca-gris-300);
  background: transparent;
  border-radius: 0;
  transition: border-color var(--ca-tr);
}
.ca-campo textarea { resize: vertical; min-height: 30px; block-size: 30px; }
.ca-campo input::placeholder, .ca-campo textarea::placeholder { color: var(--ca-gris-500); }
.ca-campo select { color: var(--ca-gris-500); }
.ca-campo input:focus, .ca-campo select:focus, .ca-campo textarea:focus { outline: 0; border-bottom-color: var(--ca-azul-vivo); }
.ca-campo.is-error input, .ca-campo.is-error select, .ca-campo.is-error textarea { border-bottom-color: var(--ca-rojo); }
.ca-campo__err { font-size: 12.5px; color: var(--ca-rojo); margin-top: 7px; display: none; }
.ca-campo.is-error .ca-campo__err { display: block; }
.ca-campo small { position: absolute; inset-block-start: 100%; margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--ca-gris-500); }

.ca-form__pie { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; margin-top: 16px; }
.ca-form__pie .ca-btn { block-size: 58px; padding-block: 0; }
.ca-form__nota { margin: 0; font-size: 12px; line-height: 19px; color: var(--ca-gris-500); }

.ca-aviso { grid-column: 1 / -1; padding: 16px 20px; border-radius: 12px; font-size: 15px; display: none; }
.ca-aviso.is-ok  { display: block; background: rgba(0,207,96,.14); color: #00622f; }
.ca-aviso.is-mal { display: block; background: rgba(192,38,28,.10); color: var(--ca-rojo); }

@media (max-width: 900px) {
  .ca-cot { padding-block: 64px; }
  .ca-cot__int { grid-template-columns: 1fr; gap: 40px; }
  .ca-cot__int::before { display: none; }
  .ca-cot .ca-h2 { margin-top: 40px; }
}
@media (max-width: 640px) {
  /* Móvil (146:81) · 390x1107 · sin bajada · una columna con paso de 78
     entre campos · datos de contacto debajo del botón. */
  .ca-cot { min-block-size: 1107px; padding-block: 59px 46px; }
  .ca-cot__int { display: flex; flex-direction: column; gap: 0; }
  .ca-cot__int > div { display: contents; }
  .ca-cot .ca-h2 { margin-top: 58px; }
  .ca-cot .ca-entrada { display: none; }
  /* El archivo no pide la empresa en móvil. El servidor tampoco la exige. */
  .ca-campo--empresa { display: none; }
  .ca-form { order: 2; grid-template-columns: 1fr; gap: 30px; margin-top: 44px; }
  .ca-campo label { margin-bottom: 4px; }
  .ca-campo input, .ca-campo select, .ca-campo textarea { font-size: 15px; line-height: 18px; padding-bottom: 12px; }
  .ca-campo--ancho { margin-top: 0; }
  .ca-campo small { display: none; }
  .ca-form__pie { margin-top: 15px; gap: 20px; }
  .ca-form__nota { font-size: 14px; line-height: 26px; }
  .ca-datos { order: 3; gap: 29px; margin-top: 10px; padding-top: 30px; }
  .ca-dato small { line-height: 14px; }
  .ca-dato strong { margin-top: 2px; font-size: 15px; line-height: 17px; }
}

/* --------------------------------------------------------------------------
   17 · Pie
   Escritorio (154:32) · 1440x520 · fondo azul
     logo 131x52 en y=168 · descripción 470 en 252 · SÍGUENOS en 358
     redes 44x44 en 384 · columnas en x=620/900/1104 con h4 en y=120
     regla 1312 en 452 · base en 478
   -------------------------------------------------------------------------- */
.ca-pie { background: var(--ca-azul); color: var(--ca-blanco); padding-block: 120px 29px; }
.ca-pie__cols { display: grid; grid-template-columns: 556px 280px 204px 272px; }
.ca-pie__logo { grid-row: 1; }
.ca-pie__logo img { width: 131px; height: 52px; object-fit: contain; margin-top: 48px; }
.ca-pie__desc { margin: 32px 0 0; max-width: 470px; font-size: 15px; line-height: 24px; color: rgba(255,255,255,.86); }

.ca-pie h2, .ca-pie h3, .ca-pie h4, .ca-pie__redes-tit {
  margin: 0 0 19px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ca-cian);
}
/* En el archivo SÍGUENOS va a 34 del final de la descripción (y=358).
   Sin depender de la etiqueta: los encabezados del pie pasaron de h4 a h2 por
   accesibilidad y esta regla dejó de aplicar, con lo que todo el pie subió. */
.ca-pie .ca-pie__redes-tit { margin: 34px 0 13px; clear: both; }
/* El archivo compone la descripción en 3 líneas. Al quitar «España» cae en 2
   y arrastraba 24px a todo lo de abajo: se fija el alto del bloque. */
.ca-pie__desc { min-block-size: 72px; }
.ca-pie ul { display: grid; gap: 13px; }
.ca-pie ul a { font-size: 15px; line-height: 17px; color: rgba(255,255,255,.9); transition: color var(--ca-tr); }
.ca-pie ul a:hover { color: var(--ca-verde); }
.ca-pie li { font-size: 15px; line-height: 17px; color: rgba(255,255,255,.9); }

.ca-pie .ca-pie__redes { display: flex; gap: 12px; }
.ca-pie__redes a {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  color: var(--ca-blanco);
  transition: background var(--ca-tr), border-color var(--ca-tr), color var(--ca-tr), transform var(--ca-t-toque) var(--ca-e-sale);
}
.ca-pie__redes a:hover { background: var(--ca-verde); border-color: var(--ca-verde); color: var(--ca-azul-osc); }
.ca-pie__redes a:active { transform: scale(.94); }
/* Sobre azul oscuro el contorno de :focus-visible del navegador no se ve. */
.ca-pie__redes a:focus-visible { outline: 2px solid var(--ca-verde); outline-offset: 3px; }
.ca-pie__redes svg { inline-size: 22px; block-size: 22px; }

.ca-pie__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.28);
  font-family: var(--ca-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.72);
}

@media (max-width: 1200px) {
  .ca-pie__cols { grid-template-columns: minmax(0, 556fr) minmax(0, 280fr) minmax(0, 204fr) minmax(0, 272fr); }
}
@media (max-width: 900px) {
  .ca-pie { padding-block: 64px 30px; }
  .ca-pie__cols { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
  .ca-pie__logo { grid-column: 1 / -1; }
  .ca-pie__logo img { margin-top: 0; }
  .ca-pie__base { flex-direction: column; gap: 10px; }
}
@media (max-width: 640px) {
  /* Móvil (156:32) · 390x1178 · una columna; cada bloque se separa con una
     regla superior a 22 de su rótulo. Logo en 126, base en 1082. */
  .ca-pie { padding-block: 126px 48px; }
  .ca-pie__cols { display: flex; flex-direction: column; gap: 0; }
  .ca-pie__logo { display: contents; }
  .ca-pie__cols > div:not(.ca-pie__logo) { order: 2; }
  /* El rotulo es un <h2>, no un <h4>: con el selector antiguo esta regla no
     casaba con nada, asi que «Siguenos» se quedaba arriba junto a la bajada
     y los iconos bajaban solos a pegarse al bloque de Contacto. */
  .ca-pie .ca-pie__redes-tit, .ca-pie .ca-pie__redes { order: 3; }
  .ca-pie__logo img { inline-size: 111px; block-size: 59px; margin-top: 0; }
  .ca-pie__desc { margin-top: 26px; max-width: none; line-height: 26px; }
  .ca-pie__cols > div:not(.ca-pie__logo) {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.28);
  }
  .ca-pie__cols > div:nth-child(2) { margin-top: 40px; }
  .ca-pie__cols > div:nth-child(2), .ca-pie__cols > div:nth-child(3), .ca-pie__cols > div:nth-child(4) { order: 2; }
  /* Los titulos de columna tambien son <h2>: con el selector solo a h4 se
     quedaban con los 19 de escritorio en vez de 8, y los tres arrastraban 33
     que empujaban el bloque de redes contra el de Contacto. */
  .ca-pie h2, .ca-pie h3, .ca-pie h4 { margin-bottom: 8px; }
  .ca-pie ul { gap: 10px; }
  .ca-pie ul a, .ca-pie li { font-size: 15px; line-height: 16px; }
  .ca-pie .ca-pie__redes-tit {
    margin: 36px 0 10px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.28);
  }
  .ca-pie .ca-pie__redes { gap: 12px; }
  .ca-pie__base { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 66px; padding-top: 22px; }
}

/* Maquina de escribir. El texto entra tecleado en la bajada de "Lo que
   hacemos". Solo se pinta de transparente lo que falta por escribir, nunca
   se quita del DOM: la caja mide lo mismo desde el primer fotograma y no
   hay ni salto de maqueta ni palabras cambiando de linea. El cursor es el
   mismo filete verde que traza el rotulo, para que el gesto sea de la casa
   y no un efecto pegado encima. */
.ca-maquina__resto { color: transparent; }
.ca-maquina.is-escribiendo .ca-maquina__resto::before {
  content: "";
  display: inline-block;
  inline-size: 2px;
  block-size: 1.05em;
  margin-inline-end: -2px;
  vertical-align: -.19em;
  background: var(--ca-verde);
  animation: ca-cursor .9s steps(1) infinite;
}
@keyframes ca-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ca-maquina__resto { color: inherit; }
  .ca-maquina.is-escribiendo .ca-maquina__resto::before { display: none; }
}

/* --------------------------------------------------------------------------
   18 · Páginas internas
   Servicios, La planta, Nosotros, Contacto, Preguntas frecuentes, blog y
   entrada individual. Estas vistas no están en el archivo de Figma: se
   conservan las reglas que ya funcionaban, deduplicadas (una declaración
   por selector). Cuando se diseñen, se reescriben con el mismo método
   que la portada.
   -------------------------------------------------------------------------- */
.ca-prosa { max-width: 696px; margin-inline: auto; }
.ca-prosa a { color: var(--ca-azul-vivo); text-decoration: underline; text-underline-offset: 3px; }
.ca-prosa blockquote { margin: 40px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--ca-verde); font-size: 21px; font-weight: 300; line-height: 1.45; color: var(--ca-azul-osc); }
.ca-prosa h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 52px 0 18px; }
.ca-prosa h3 { font-size: clamp(20px, 2vw, 24px); margin: 40px 0 14px; }
.ca-prosa img,
.ca-prosa figure { border-radius: var(--ca-radio); margin-block: 36px; }
.ca-prosa li { margin-bottom: .55em; }
.ca-prosa ol { list-style: decimal; }
.ca-prosa p,
.ca-prosa ul li,
.ca-prosa ol li { font-size: 17.5px; line-height: 1.78; color: var(--ca-gris-900); }
.ca-prosa ul,
.ca-prosa ol { margin: 0 0 1.4em; padding-left: 1.3em; list-style: disc; }
.ca-art__meta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-family: var(--ca-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 26px; }
.ca-cab__int { position: relative; z-index: 2; }
.ca-canal { display: flex; gap: 22px; align-items: flex-start; }
.ca-canal p { font-size: 14px; color: var(--ca-gris-700); margin: 8px 0 0; }
.ca-canal small { font-family: var(--ca-mono); font-size: 11px; letter-spacing: .15em; color: var(--ca-azul-vivo); text-transform: uppercase; display: block; margin-bottom: 8px; }
.ca-canal strong { display: block; font-size: 20px; font-weight: 300; color: var(--ca-azul-osc); line-height: 1.3; overflow-wrap: anywhere; }
.ca-capsulas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .1; }
.ca-capsulas span { position: absolute; display: block; height: 14px; border-radius: 999px; background: currentColor; }
.ca-centro { text-align: center; }
.ca-claro { background: var(--ca-gris-100); }
.ca-etapa h3 { font-size: 21px; margin-bottom: 12px; }
.ca-etapa p { font-size: 15px; line-height: 1.6; }
.ca-etapa__n { font-family: var(--ca-mono); font-size: 11px; letter-spacing: .16em; color: var(--ca-azul-vivo); display: block; padding-bottom: 16px; margin-bottom: 20px; border-top: 2px solid var(--ca-azul-vivo); padding-top: 16px; }
.ca-etapas { display: grid; gap: 34px; counter-reset: etapa; }
.ca-familia + .ca-familia { margin-top: 64px; }
.ca-familia__tit { font-family: var(--ca-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ca-azul-vivo); padding-bottom: 14px; margin-bottom: 30px; border-bottom: 1px solid var(--ca-gris-300); }
.ca-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.ca-filtros a { padding: 9px 20px; border-radius: 999px; border: 1px solid var(--ca-gris-300); font-size: 14px; color: var(--ca-gris-700); transition: background var(--ca-tr), border-color var(--ca-tr), color var(--ca-tr); }
.ca-filtros a:hover,
.ca-filtros a.is-activo { background: var(--ca-azul); border-color: var(--ca-azul); color: #fff; }
.ca-grid { display: grid; gap: 32px; }
.ca-pag { display: flex; gap: 10px; justify-content: center; margin-top: 56px; flex-wrap: wrap; }
.ca-pag .page-numbers { min-inline-size: 44px; padding: 10px 14px; text-align: center; border: 1px solid var(--ca-gris-300); border-radius: 10px; font-size: 14px; transition: background var(--ca-tr), border-color var(--ca-tr), color var(--ca-tr); }
.ca-pag .page-numbers:hover,
.ca-pag .page-numbers.current { background: var(--ca-azul); border-color: var(--ca-azul); color: #fff; }
.ca-serv__cab { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 20px; }
.ca-serv__int { display: grid; gap: 34px; padding-block: clamp(48px, 5vw, 80px); }
.ca-serv__lista { display: grid; gap: 13px; margin-bottom: 26px; }
.ca-serv__lista li { font-size: 15px; line-height: 1.6; }
.ca-serv__lista li::before { content: ""; position: absolute; left: 0; top: .55em; inline-size: 10px; block-size: 10px; border-radius: 3px 3px 3px 100%; background: var(--ca-verde); }
.ca-serv__num { font-family: var(--ca-mono); font-size: 11px; letter-spacing: .16em; color: var(--ca-azul-vivo); padding-top: 8px; }
/* Esta lista de selectores se había quedado pegada al cuerpo de .ca-tarjeta,
   y los números y rótulos salían metidos en una caja con borde. */
.ca-tarjeta { background: var(--ca-blanco); border: 1px solid var(--ca-gris-300); border-radius: var(--ca-radio); padding: 34px; transition: border-color var(--ca-tr), transform var(--ca-tr), box-shadow var(--ca-tr); }
.ca-tarjeta h3 { margin-bottom: 12px; }
.ca-tarjeta p { font-size: 15px; line-height: 1.6; }
.ca-tarjeta:hover { border-color: var(--ca-azul-vivo); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,35,79,.10); }
.ca-tarjeta__num { font-family: var(--ca-mono); font-size: 11px; letter-spacing: .15em; color: var(--ca-azul-vivo); display: block; margin-bottom: 16px; }

@media (min-width: 600px) and (max-width: 899px) {
  .ca-grid--3, .ca-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .ca-etapas { grid-template-columns: repeat(4, 1fr); }
  .ca-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ca-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ca-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .ca-serv__int { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
}

@media (min-width: 700px) {
  .ca-cifras { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .ca-cifras { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================================
 * 20 · Páginas internas (02 · Vistas internas del archivo)
 *
 * La cabecera con foto se repite en las seis, pero cada una tiene sus
 * medidas: la foto acaba a distinta altura, el filete verde mide distinto y
 * el titular arranca en otro punto. Van por variables, y cada plantilla pone
 * las suyas en el atributo style: las que empiezan por --e- son de escritorio
 * y las --m- de móvil.
 * ====================================================================== */
.ca-cab--foto {
  /* El velo vertical mide distinto en cada ancho: en el archivo escala con el
     alto de la foto. Se pide por --e-velo-alto / --m-velo-alto; --cab-velo-alto
     se sigue leyendo por compatibilidad con las plantillas antiguas. */
  --cab-velo-usar: var(--e-velo-alto, var(--cab-velo-alto, 482px));
  --cab-foto:   var(--e-foto,   648px);
  --cab-filete: var(--e-filete,  52px);
  --cab-h1-mt:  var(--e-h1-mt,   78px);
  --cab-h1-lh:  var(--e-h1-lh,   97px);
  --cab-h1-fs:  var(--e-h1-fs,   84px);
  --cab-h1-w:   var(--e-h1-w,  1120px);
  --cab-p-mt:   var(--e-p-mt,    36px);
  --cab-p-w:    var(--e-p-w,    680px);
  --cab-abajo:  var(--e-abajo,  136px);
  --cab-arriba: var(--e-arriba, 152px);

  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--ca-azul);
}
/* La foto ocupa sólo la parte de arriba; lo que queda por debajo es ya la
   banda azul que sigue en la sección siguiente. */
.ca-cab__foto {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--cab-foto);
  overflow: hidden;
  /* Capas, de abajo arriba: la foto es el fondo del contenedor, el vídeo (si
     lo hay) va encima como hijo posicionado, y los DOS velos del archivo se
     pintan por delante con ::after. Antes los velos eran el fondo y el vídeo
     iba en z-index:-1, con lo que quedaba detrás y Chrome ni lo descargaba. */
  background-image: var(--ca-cab-foto);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}
/* Las fotos de cabecera vienen muy subexpuestas en la mitad inferior, que es
   justo donde cae el titular: entre 0.065 y 0.149 de luminancia frente al 0.177
   del hero de portada. El velo no puede arreglarlo (no hay detalle que revelar),
   así que se iguala el rango tonal por foto. Medido: el titular se mantiene
   entre 9.4:1 y 11.4:1 de contraste, muy por encima del 4.5:1 exigible. */
.page-template-page-nosotros  .ca-cab.ca-cab--foto > .ca-cab__foto { filter: brightness(1.30) contrast(.89); }
.page-template-page-servicios .ca-cab.ca-cab--foto > .ca-cab__foto { filter: brightness(1.45) contrast(.83); }
.page-template-page-la-planta .ca-cab.ca-cab--foto > .ca-cab__foto { filter: brightness(1.60) contrast(.80); }
.page-template-page-contacto  .ca-cab.ca-cab--foto > .ca-cab__foto { filter: brightness(1.10) contrast(.96); }
/* Las bandas de cita llevan su propia foto y su propia medida. La de servicios
   (cita-servicios.webp) es compost: 0.048 de luminancia global, negra de origen.
   Aclararla solo la agrisa, así que se deja tal cual y se pide otra foto. */
.page-template-page-la-planta .ca-cita2 .ca-cab__foto { filter: brightness(1.20) contrast(.92); }

.ca-cab__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg,
      rgba(var(--ca-velo), .50) 0%,
      rgba(var(--ca-velo), .18) 55%,
      rgba(var(--ca-velo), 0) 100%),
    linear-gradient(90deg,
      rgba(var(--ca-velo), .80) 0%,
      rgba(var(--ca-velo), .52) 34%,
      rgba(var(--ca-velo), .20) 68%,
      rgba(var(--ca-velo), .05) 100%);
  background-repeat: no-repeat;
  background-position: top left, center;
  background-size: 100% var(--cab-velo-usar, 482px), cover;
}
.ca-cab--foto .ca-cab__int { position: relative; padding: var(--cab-arriba) 24px var(--cab-abajo); }

/* Rótulo de dos líneas con el filete verde al margen. */
.ca-rotulo {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ca-cian);
}
.ca-rotulo::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 4px;
  height: var(--cab-filete, 52px);
  background: var(--ca-verde);
}
.ca-cab--foto .ca-h1 {
  max-width: var(--cab-h1-w);
  margin: var(--cab-h1-mt) 0 0;
  font-size: var(--cab-h1-fs);
  line-height: var(--cab-h1-lh);
}
.ca-cab--foto .ca-entrada {
  max-width: var(--cab-p-w);
  margin: var(--cab-p-mt) 0 0;
  font-size: 17px;
  line-height: 27px;
  color: var(--ca-azul-tenue);
}

/* El archivo acorta algunos rótulos en móvil. */
.ca-solo-movil,
.ca-tarjeta-post.ca-solo-movil { display: none; }

/* -------------------------------------------------------------------------
 * Banda azul con la curva grande abajo a la izquierda. Sale en varias
 * páginas justo debajo de la cabecera: 200 de alto y 205 de radio.
 * ---------------------------------------------------------------------- */
.ca-banda-curva { position: relative; overflow: hidden; padding: 0; }
.ca-banda-curva::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--curva-alto, 200px);
  background: var(--ca-azul);
  border-bottom-left-radius: var(--curva-radio, 200px);
}
.ca-banda-curva > .ca-wrap { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
 * Contacto · canales
 * ---------------------------------------------------------------------- */
.ca-canales__circulos { left: 1120px; top: 440px; }
.ca-canales .ca-wrap { padding: 292px 24px 82px; }
.ca-canales .ca-tag { color: var(--ca-gris-900); }
.ca-canales .ca-h2 { margin: 44px 0 0; line-height: 54px; }

.ca-canales__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 304px));
  justify-content: start;
  column-gap: 28px;
  margin-top: 56px;
}
/* Cada canal lleva un filete gris arriba: en el archivo es un rectángulo de
   280x1 a y=460, ocho píxeles por encima del icono. */
.ca-canal {
  position: relative;
  display: block;
  padding-top: 22px;
  background: linear-gradient(var(--ca-gris-300), var(--ca-gris-300)) top left / 280px 1px no-repeat;
}
.ca-canal__ico {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 0;
}
.ca-canal small {
  display: block;
  margin: 0;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ca-azul-vivo);
}
/* El icono flota arriba a la derecha y ocupa de 232 a 304 de la columna:
   el valor se corta en 216 para no pasar por debajo. El archivo no lo hace
   y por eso ahí el correo y la direccion salen partidos por el icono. */
.ca-canal strong {
  display: block;
  max-width: 216px;
  margin-top: 12px;
  font-size: 20px;
  font-weight: 300;
  line-height: 26px;
  color: var(--ca-azul-osc);
  overflow-wrap: anywhere;
}
.ca-canal strong a { color: inherit; text-decoration: none; }
.ca-canal strong a:hover { text-decoration: underline; }
.ca-canal p {
  max-width: 270px;
  margin: 13px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--ca-gris-700);
}

@media (max-width: 640px) {
  .ca-cab--foto {
    --cab-foto:   var(--m-foto,   430px);
    --cab-filete: var(--m-filete,  40px);
    --cab-h1-mt:  var(--m-h1-mt,   58px);
    --cab-h1-lh:  var(--m-h1-lh,   42px);
    --cab-h1-fs:  var(--m-h1-fs,   37px);
    --cab-h1-w:   var(--m-h1-w,   none);
    --cab-p-mt:   var(--m-p-mt,    26px);
    --cab-p-w:    var(--m-p-w,    none);
    --cab-abajo:  var(--m-abajo,   98px);
    --cab-arriba: var(--m-arriba,  58px);
    --cab-velo-usar: var(--m-velo-alto, 320px);
  }
  /* La cabecera del blog lleva el velo a toda la foto (217:60). */
  body.blog .ca-cab--foto { --m-velo-alto: 356px; }
  .ca-cab--foto .ca-entrada { font-size: 15px; line-height: 26px; }
  .ca-rotulo { gap: 6px; padding-left: 16px; }
  .ca-rotulo::before { top: -2px; width: 3px; }
  .ca-solo-movil { display: block; }
  .ca-tarjeta-post.ca-solo-movil { display: flex; }
  .ca-solo-escritorio { display: none; }

  .ca-banda-curva::before { height: var(--curva-alto-m, 120px); border-bottom-left-radius: var(--curva-radio-m, 120px); }

  .ca-canales__circulos { left: 220px; top: 658px; }
  .ca-canales .ca-wrap { padding: 178px 24px 44px; }
  .ca-canales .ca-h2 { margin-top: 32px; line-height: 38px; }
  .ca-canales__lista { grid-template-columns: 1fr; row-gap: 30px; margin-top: 34px; }
  .ca-canal__ico { inset-inline-end: -16px; }
  /* 14 y no 22: en 196:199 el rotulo del canal cae 14 por debajo del filete. */
  .ca-canal { background-size: 100% 1px; padding-top: 14px; }
  /* El icono ocupa 326-382: sin este hueco el numero de oficina y el correo
     quedan tapados por el circulo. */
  .ca-canal strong { max-width: none; margin-top: 8px; padding-inline-end: 72px; }
  .ca-canal p { max-width: none; margin-top: 8px; line-height: 21px; }
}

/* -------------------------------------------------------------------------
 * Blog · artículo destacado y rejilla de artículos
 * Medidas del nodo 214:163 y 214:173 del archivo.
 * ---------------------------------------------------------------------- */
.ca-destacado { position: relative; overflow: hidden; padding: 0; background: var(--ca-blanco); }
.ca-destacado::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 200px;
  background: var(--ca-azul);
  border-bottom-left-radius: 200px;
}
.ca-destacado .ca-wrap { position: relative; z-index: 1; padding: 268px 24px 86px; }
.ca-destacado__int { display: block; }

.ca-rotulo1 {                       /* rótulo de una sola línea con filete */
  position: relative;
  display: block;
  margin: 0;
  padding-left: 24px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ca-verde-osc);
}
.ca-rotulo1::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 4px;
  height: var(--rotulo-filete, 64px);
  background: var(--ca-verde);
}

.ca-destacado__foto {
  position: absolute;
  z-index: 2;
  top: 264px;
  left: 720px;
  width: 656px;
  height: 400px;
  border-top-left-radius: 28px;
  overflow: hidden;
}
.ca-destacado__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ca-destacado__cat {
  display: block;
  margin: 70px 0 0;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ca-verde-osc);
}
.ca-destacado h2 {
  max-width: 600px;
  margin: 18px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 54px;
  letter-spacing: -.018em;
  color: var(--ca-azul);
}
.ca-destacado h2 a { color: inherit; text-decoration: none; }
.ca-destacado h2 a:hover { text-decoration: underline; }
.ca-destacado .ca-enlace { --enlace-mt: 56px; }
.ca-destacado__pie {
  max-width: 580px;
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 28px;
  color: var(--ca-gris-900);
}
.ca-enlace {
  display: inline-block;
  margin-top: var(--enlace-mt, 24px);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ca-verde);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ca-azul-vivo);
  text-decoration: none;
}
.ca-enlace--corto { border-bottom-width: 0; padding-bottom: 0; }

/* Rejilla de artículos, sobre gris con el patrón de cápsulas arriba a la derecha. */
.ca-articulos { position: relative; overflow: hidden; padding: 0; background: var(--ca-gris-100); }
.ca-articulos .ca-wrap { position: relative; z-index: 1; padding: 92px 24px 124px; }
.ca-capsulas {
  /* Ojo: hay un .ca-capsulas heredado con inset:0 que estiraría la caja. */
  position: absolute;
  inset: -60px auto auto 1080px;
  top: -60px;
  left: 1080px;
  right: auto;
  bottom: auto;
  width: 372px;
  height: 520px;
  opacity: .1;
  pointer-events: none;
}
.ca-capsulas i {
  position: absolute;
  width: 42px;
  height: 96px;
  border-radius: 21px;
}
.ca-capsulas i.llena { background: var(--ca-azul-vivo); }
.ca-capsulas i.hueca { border: 2px solid var(--ca-azul-vivo); }

.ca-articulos .ca-h2 { margin: 72px 0 0; max-width: 800px; line-height: 52px; }

/* La fila mide 50 aunque no haya ninguna píldora activa: el archivo reserva
   ese alto para la que lo está, y de él dependen los 350 de la rejilla. */
.ca-temas { display: flex; align-items: flex-start; gap: 12px; min-height: 50px; margin-top: 36px; flex-wrap: wrap; }
.ca-temas a {
  display: flex;
  align-items: center;
  width: 260px;
  height: 40px;
  padding-left: 20px;
  border: 1px solid var(--ca-gris-300);
  border-radius: 20px;
  background: var(--ca-blanco);
  font-size: 14px;
  line-height: 18px;
  color: var(--ca-gris-900);
  text-decoration: none;
}
.ca-temas a.is-activo {
  height: 50px;
  border-color: var(--ca-azul);
  background: var(--ca-azul);
  color: var(--ca-blanco);
}

.ca-tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 413px);
  justify-content: start;
  gap: 21px 25px;
  margin-top: 34px;
  align-items: start;
}
.ca-tarjeta-post {
  display: flex;
  flex-direction: column;
  min-height: 419px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ca-blanco);
}
/* En la portada la tarjeta no lleva extracto: el archivo la cierra en 355,
   no en los 419 de la rejilla del blog. */
.ca-blog .ca-tarjeta-post { min-height: 355px; }
.ca-tarjeta-post__img { display: block; height: 200px; }
.ca-tarjeta-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 18 arriba: con 24 el rótulo de la tarjeta caía en 550 y el archivo lo
   pone en 544. */
.ca-tarjeta-post__cuerpo { padding: 18px 24px 24px; }
.ca-tarjeta-post__cat {
  display: block;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ca-verde-osc);
}
/* 20/27 como en relacionados: con 21/28 el titular caía en 3 líneas y el
   archivo lo compone en 2 (h=54). */
.ca-tarjeta-post h3 {
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 27px;
  color: var(--ca-azul);
}
.ca-tarjeta-post h3 a { color: inherit; text-decoration: none; }
.ca-tarjeta-post h3 a:hover { text-decoration: underline; }
.ca-tarjeta-post p { margin: 10px 0 0; font-size: 14px; line-height: 22px; color: var(--ca-gris-900); }
.ca-tarjeta-post .ca-enlace { margin-top: 16px; font-size: 14px; line-height: 19px; }

@media (max-width: 640px) {
  .ca-destacado { display: none; }          /* en móvil el archivo no lo trae */

  .ca-rotulo1 { padding-left: 16px; }
  .ca-rotulo1::before { width: 3px; height: 44px; }
  .ca-articulos .ca-wrap { padding: 178px 24px 48px; }
  /* En móvil el titular parte en dos líneas: el archivo lo maqueta más grande. */
  .ca-articulos .ca-h2 { margin-top: 52px; font-size: 34px; line-height: 38px; }
  .ca-capsulas { top: -40px; left: 220px; width: 192px; height: 320px; }
  .ca-capsulas i { width: 22px; height: 50px; border-radius: 11px; }

  .ca-temas { display: none; }              /* el archivo no los pinta en móvil */

  .ca-tarjetas { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .ca-tarjeta-post { min-height: 0; }
  .ca-tarjeta-post__img { height: 170px; }
  .ca-tarjeta-post__cuerpo { padding: 22px 20px 20px; }
  .ca-tarjeta-post__cat { letter-spacing: 1.4px; }
  .ca-tarjeta-post h3 { margin-top: 10px; font-size: 18px; line-height: 25px; }
  /* El archivo acorta los extractos en móvil para que quepan en dos líneas.
     Como el extracto es un solo campo, se recorta por CSS. */
  .ca-tarjeta-post p {
    margin-top: 8px;
    font-size: 16px;
    line-height: 26px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ca-tarjeta-post .ca-enlace {
    display: flex;
    align-items: center;
    height: 44px;
    margin-top: 2px;
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* -------------------------------------------------------------------------
 * Entrada del blog (nodos 215:70, 215:77, 215:94 y 215:100)
 * La columna de lectura son 696 centrados; la foto de cabecera se sale de
 * ella y ocupa los 1312 de la retícula.
 * ---------------------------------------------------------------------- */
/* Ojo: más arriba hay un `.ca-art { max-width: 696px }` de la plantilla vieja
   que encogía la cabecera entera. Aquí .ca-art es el artículo completo. */
.ca-art { max-width: none; margin-inline: 0; background: var(--ca-blanco); }
.ca-art__cab { position: relative; padding: 80px 0; }
.ca-art__col { width: 696px; max-width: calc(100% - 48px); margin: 0 auto; }

.ca-art__migas {
  display: block;
  margin: 0;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ca-verde-osc);
}
.ca-art__migas a { color: inherit; text-decoration: none; }
.ca-art__migas a:hover { text-decoration: underline; }

.ca-art h1 {
  margin: 20px 0 0;
  font-size: 52px;
  font-weight: 300;
  line-height: 62px;
  letter-spacing: -.02em;
  color: var(--ca-azul);
}
.ca-art__entradilla {
  margin: 26px 0 0;
  font-size: 20px;
  line-height: 32px;
  color: var(--ca-gris-900);
}
.ca-art__linea { height: 1px; margin: 32px 0 0; border: 0; background: var(--ca-gris-300); }
.ca-art__meta {
  display: block;
  margin: 19px 0 0;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ca-gris-900);
}
.ca-art__foto {
  display: block;
  width: 1312px;
  max-width: calc(100% - 48px);
  height: 560px;
  margin: 46px auto 0;
  border-top-left-radius: 28px;
  border-bottom-right-radius: 28px;
  overflow: hidden;
}
.ca-art__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cuerpo del artículo: lo escribe el editor, así que se estila por etiqueta. */
.ca-art__cuerpo { padding: 80px 0 68px; }
/* El ancho de lectura lo pone .ca-prosa; aquí sólo el centrado. */
.ca-art__cuerpo > * { margin-inline: auto; }
.ca-art__cuerpo p { margin: 0 0 52px; font-size: 19px; line-height: 32px; color: var(--ca-gris-900); }
.ca-art__cuerpo h2 {
  margin: 0 auto 18px;
  font-size: 32px;
  font-weight: 300;
  line-height: 42px;
  color: var(--ca-azul);
}
.ca-art__cuerpo h3 {
  margin: 0 auto 16px;
  font-size: 24px;
  font-weight: 300;
  line-height: 34px;
  color: var(--ca-azul);
}
.ca-art__cuerpo ul { margin: 0 auto 40px; padding: 0; list-style: none; }
.ca-art__cuerpo ul li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 22px;
  font-size: 18px;
  line-height: 28px;
  color: var(--ca-gris-900);
}
.ca-art__cuerpo ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--ca-verde);
}
.ca-art__cuerpo blockquote {
  margin: 0 auto 64px;
  padding-left: 32px;
  border-left: 4px solid var(--ca-verde);
  font-size: 26px;
  font-weight: 300;
  line-height: 38px;
  color: var(--ca-azul);
}
.ca-art__cuerpo blockquote p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.ca-art__cuerpo img { max-width: 100%; height: auto; border-radius: 16px; }

/* Banda de conversión al final del artículo. */
.ca-conversion { position: relative; overflow: hidden; padding: 0; background: var(--ca-azul); color: var(--ca-blanco); }
.ca-conversion .ca-wrap { position: relative; z-index: 1; padding: 84px 24px 96px; }
.ca-conversion .ca-rotulo1 { color: var(--ca-cian); }
.ca-conversion__h {
  max-width: 760px;
  margin: 70px 0 0;
  font-size: 36px;
  font-weight: 300;
  line-height: 46px;
  color: var(--ca-blanco);
}
.ca-conversion__btn {
  position: absolute;
  top: 168px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 264px;
  height: 60px;
  border-radius: 15px;
  background: var(--ca-verde);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: var(--ca-azul);
  text-decoration: none;
}

/* Artículos relacionados: como las tarjetas del blog pero sin extracto. */
.ca-relacionados { position: relative; overflow: hidden; padding: 0; background: var(--ca-gris-100); }
.ca-relacionados .ca-wrap { position: relative; z-index: 1; padding: 92px 24px 96px; }
.ca-relacionados .ca-h2 { margin: 72px 0 0; max-width: 800px; line-height: 52px; }
.ca-relacionados .ca-tarjetas { margin-top: 48px; }
.ca-relacionados .ca-tarjeta-post { min-height: 0; }
.ca-relacionados .ca-tarjeta-post__img { height: 170px; }
.ca-relacionados .ca-tarjeta-post h3 { margin-top: 12px; font-size: 20px; line-height: 27px; }
.ca-relacionados .ca-tarjeta-post .ca-enlace { margin-top: 14px; }

@media (max-width: 640px) {
  .ca-art__cab { padding-top: 40px; }
  .ca-art h1 { font-size: 32px; line-height: 40px; }
  .ca-art__entradilla { font-size: 17px; line-height: 28px; }
  .ca-art__foto { height: 260px; margin-top: 32px; border-radius: 0 0 20px 0; border-top-left-radius: 20px; }
  .ca-art__cuerpo { padding: 48px 0 40px; }
  .ca-art__cuerpo p { font-size: 17px; line-height: 29px; margin-bottom: 32px; }
  .ca-art__cuerpo h2 { font-size: 26px; line-height: 34px; }
  .ca-art__cuerpo blockquote { font-size: 21px; line-height: 31px; padding-left: 20px; margin-bottom: 40px; }
  /* 58 arriba y 40 abajo: con 64/64 la banda salia 394 contra los 364 del
     archivo (217:214) y el rotulo caia 6px por debajo de su sitio. */
  .ca-conversion .ca-wrap { padding: 58px 24px 40px; }
  .ca-conversion__h { margin-top: 52px; font-size: 28px; line-height: 36px; }
  .ca-conversion__btn { position: static; width: 100%; margin-top: 32px; }
  .ca-relacionados .ca-wrap { padding: 72px 24px 64px; }
  .ca-relacionados .ca-h2 { margin-top: 52px; }
}

/* -------------------------------------------------------------------------
 * Nosotros (nodos 194:70, 194:78 y 194:94)
 * ---------------------------------------------------------------------- */
/* El contenedor de icono de marca: 72, con la esquina inferior izquierda
   más redondeada que las otras tres. Es la forma del archivo. */
.ca-icono--marca {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 18px 18px 18px 36px;
  background: var(--ca-azul);
  color: var(--ca-blanco);
}
.ca-icono--marca svg { inline-size: 38px; block-size: 38px; }

.ca-cred2 { position: relative; overflow: hidden; padding: 0; background: var(--ca-blanco); }
.ca-cred2 .ca-wrap { position: relative; z-index: 1; padding: 292px 24px 186px; }
.ca-cred2 .ca-h2 { margin: 44px 0 0; max-width: 860px; line-height: 54px; }

.ca-cred2__lista {
  display: grid;
  grid-template-columns: repeat(2, 620px);
  justify-content: start;
  column-gap: 52px;
  row-gap: 80px;
  margin-top: 56px;
}
.ca-cred2__it { position: relative; padding-top: 24px; border-top: 1px solid var(--ca-gris-300); }
/* -12: el archivo saca el icono 12px fuera de la columna, y así el párrafo
   de 556 ya no pasa por debajo. */
.ca-cred2__it .ca-icono { position: absolute; top: 16px; right: -12px; }
.ca-cred2__it h3 {
  max-width: 540px;
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 30px;
  color: var(--ca-azul);
}
/* El párrafo mide los 600 del archivo, y para que la PRIMERA línea no pase
   por debajo del icono se le pone un flotador de 30 con shape-outside: solo
   acorta esa línea, no las de abajo. Recortar el ancho entero metía una línea
   de más y estiraba la sección 24px. */
.ca-cred2__it p::before {
  content: "";
  float: right;
  inline-size: 30px;
  block-size: 24px;
  shape-outside: inset(0);
}
.ca-cred2__it p {
  max-width: 600px;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--ca-gris-900);
}

.ca-presencia { position: relative; overflow: hidden; padding: 0; background: var(--ca-azul); color: var(--ca-blanco); }
.ca-presencia .ca-wrap { position: relative; z-index: 1; padding: 84px 24px 74px; }
.ca-presencia .ca-rotulo1 { color: var(--ca-cian); }
/* 620 y no los 860 del archivo: con «Tres países» el titular cabe en una
   línea y todo el bloque subía 53px. Se fuerza el corte en dos. */
.ca-presencia .ca-h2 { margin: 42px 0 0; max-width: 620px; line-height: 54px; color: var(--ca-blanco); }
.ca-presencia__paises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 280px));
  justify-content: start;
  column-gap: 52px;
  margin-top: 56px;
}
.ca-presencia__pais { padding-top: 22px; border-top: 1px solid var(--ca-azul-vivo); }
.ca-presencia__pais h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 300;
  line-height: 38px;
  color: var(--ca-verde);
}
.ca-presencia__pais p {
  max-width: 270px;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--ca-azul-tenue);
}
.ca-presencia__cierre {
  max-width: 1000px;
  margin: 86px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--ca-azul-tenue);
}

@media (max-width: 640px) {
  .ca-icono--marca { inline-size: 56px; block-size: 56px; border-radius: 14px 14px 14px 28px; }
  .ca-icono--marca svg { inline-size: 28px; block-size: 28px; }
  .ca-cred2 .ca-wrap { padding: 178px 24px 64px; }
  .ca-cred2 .ca-h2 { margin-top: 32px; line-height: 38px; }
  .ca-cred2__lista { grid-template-columns: 1fr; row-gap: 36px; margin-top: 48px; }
  /* El archivo (195:68) pone el rotulo del item 8px por debajo del filete y
     la linea del h3 en 26, no en 30. Con los 24 de relleno y la linea de 30
     cada item se iba 21px y los cuatro sumaban 126 de mas. */
  .ca-cred2__it { padding-top: 7px; }
  /* En 390 el archivo compone todos los subtitulos de item en 26, no en 30:
     con 30 cada bloque se va 4px y al cuarto ya son 16 arrastrados. */
  .ca-cred2__it h3,
  .ca-etapas2__it h3,
  .ca-ciclo__it h3 { line-height: 26px; }
  .ca-cred2 .ca-wrap { padding-block-end: 48px; }
  .ca-presencia .ca-wrap { padding: 64px 24px 56px; }
  .ca-presencia .ca-h2 { margin-top: 36px; line-height: 38px; }
  .ca-presencia__paises { grid-template-columns: 1fr; row-gap: 28px; margin-top: 40px; }
  .ca-presencia__cierre { margin-top: 40px; }
}

/* -------------------------------------------------------------------------
 * Banda de cita con foto (nodo 206:39) y franja de clientes (194:111).
 * Salen en varias internas con medidas propias, así que van por variables
 * igual que la cabecera. La cita reusa la maquinaria de foto + velos.
 * ---------------------------------------------------------------------- */
.ca-cita2 { position: relative; overflow: hidden; padding: 0; background: var(--ca-azul-osc); }
.ca-cita2 .ca-wrap { position: relative; z-index: 1; padding: var(--cita-arriba, 154px) 24px var(--cita-abajo, 154px); }
.ca-cita2 .ca-rotulo1 { color: var(--ca-cian); }
/* Mitad Light y mitad Bold, como los titulares de la portada. */
.ca-cita2__frase strong { font-weight: 700; }
.ca-cita2__frase {
  max-width: var(--cita-frase-w, 1180px);
  margin: var(--cita-frase-mt, 78px) 0 0;
  font-size: var(--cita-frase-fs, 64px);
  font-weight: 300;
  line-height: var(--cita-frase-lh, 76px);
  letter-spacing: -.02em;
  color: var(--ca-blanco);
}
.ca-cita2__pie {
  max-width: var(--cita-pie-w, 640px);
  margin: var(--cita-pie-mt, 34px) 0 0;
  font-size: 17px;
  line-height: 27px;
  color: var(--ca-azul-tenue);
}

.ca-clientes2 { position: relative; overflow: hidden; padding: 0; background: var(--ca-blanco); }
.ca-clientes2 .ca-wrap { position: relative; z-index: 1; padding: 292px 24px 56px; }
.ca-clientes2__regla { position: absolute; top: 200px; left: 0; width: 100%; height: 1px; background: var(--ca-gris-300); }
.ca-clientes2 .ca-rotulo1 { color: var(--ca-gris-900); letter-spacing: 2.2px; }
.ca-clientes2 h2 {
  margin: 72px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 52px;
  letter-spacing: -.018em;
  color: var(--ca-azul);
}
.ca-clientes2 h2 strong { display: block; font-weight: 700; }
.ca-clientes2__nota {
  position: absolute;
  top: 428px;
  left: 896px;
  width: 440px;
  margin: 0;
  font-size: 16px;
  line-height: 27px;
  color: var(--ca-gris-900);
}

/* La malla: el gris del fondo se ve por los huecos de 1px entre celdas. */
.ca-clientes2__malla {
  margin-top: 62px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ca-gris-300);
  display: grid;
  gap: 1px;
}
.ca-clientes2__fila { display: grid; gap: 1px; }
.ca-clientes2__fila--6 { grid-template-columns: repeat(6, 1fr); }
.ca-clientes2__fila--5 { grid-template-columns: repeat(5, 1fr); }
.ca-clientes2__celda {
  display: grid;
  place-items: center;
  height: 131px;
  background: var(--ca-blanco);
}
.ca-clientes2__celda img {
  width: 158px;
  height: 75px;
  object-fit: contain;
}
.ca-clientes2__fuente {
  margin: 28px 0 0;
  font-family: var(--ca-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--ca-gris-900);
}

@media (max-width: 640px) {
  .ca-cita2 .ca-wrap { padding: var(--cita-arriba-m, 96px) 24px var(--cita-abajo-m, 96px); }
  .ca-cita2__frase { font-size: var(--cita-frase-fs-m, 32px); line-height: var(--cita-frase-lh-m, 40px); margin-top: 48px; }
  .ca-cita2__pie { margin-top: 26px; font-size: 15px; line-height: 26px; }
  .ca-clientes2 .ca-wrap { padding: 168px 24px 56px; }
  .ca-clientes2__regla { top: 120px; }
  .ca-clientes2 h2 { margin-top: 40px; font-size: 30px; line-height: 38px; }
  .ca-clientes2__nota { position: static; width: auto; margin-top: 24px; font-size: 15px; line-height: 26px; }
  .ca-clientes2__malla { margin-top: 36px; }
  .ca-clientes2__fila--6 { grid-template-columns: repeat(3, 1fr); }
  .ca-clientes2__fila--5 { grid-template-columns: repeat(3, 1fr); }
  .ca-clientes2__celda { height: 96px; }
  .ca-clientes2__celda img { width: 104px; height: 50px; }
}

/* -------------------------------------------------------------------------
 * La planta · etapas del proceso (nodo 191:78)
 * Cuatro columnas de 280 con filete arriba, número, título y texto.
 * ---------------------------------------------------------------------- */
.ca-etapas2 { position: relative; overflow: hidden; padding: 0; background: var(--ca-blanco); }
.ca-etapas2 .ca-wrap { position: relative; z-index: 1; padding: 292px 24px 86px; }
.ca-etapas2 .ca-h2 { margin: 44px 0 0; max-width: 820px; line-height: 54px; }
.ca-etapas2__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 280px));
  justify-content: start;
  column-gap: 52px;
  margin-top: 64px;
}
/* El icono va colgado del filete, asomando por el borde derecho de la
   columna, igual que en .ca-cred2. El archivo lo pone en y=488 y la regla del
   item cae en 522, de ahi el -34. */
.ca-etapas2__it { position: relative; padding-top: 24px; border-top: 1px solid var(--ca-gris-300); }
.ca-etapas2__it .ca-icono { position: absolute; top: -34px; right: -6px; }
.ca-etapas2__num {
  display: block;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.6px;
  color: var(--ca-verde-osc);
}
.ca-etapas2__it h3 {
  margin: 12px 0 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 30px;
  color: var(--ca-azul);
}
.ca-etapas2__it p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--ca-gris-900);
}

@media (max-width: 640px) {
  .ca-etapas2 .ca-wrap { padding: 178px 24px 56px; }
  .ca-etapas2 .ca-h2 { margin-top: 32px; line-height: 38px; }
  .ca-etapas2__lista { grid-template-columns: 1fr; row-gap: 32px; margin-top: 40px; }
  /* Estas dos van aqui y no en el bloque movil de arriba: la regla base de
     .ca-etapas2__it esta declarada DESPUES, y con la misma especificidad
     ganaba por orden aunque la mia estuviera dentro de un @media. */
  .ca-etapas2__it { padding-top: 17px; }
  /* En 390 el archivo lo pone en 354 y la regla del item cae en 378. */
  .ca-etapas2__it .ca-icono { top: -24px; right: -16px; }
  .ca-etapas2__it h3 { line-height: 26px; }
}

/* -------------------------------------------------------------------------
 * Recursos decorativos del archivo. Los tenía sin poner: la curva del
 * isotipo (bandas azules) y los tres círculos superpuestos.
 * ---------------------------------------------------------------------- */
.ca-recurso {
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.ca-recurso--curva {
  width: 275.46px;
  height: 409.03px;
  background-image: url("../img/recurso-curva.svg");
}
.ca-recurso--circulos {
  width: 672px;
  height: 320px;
  background-image: url("../img/recurso-circulos.svg");
}
@media (max-width: 640px) {
  .ca-recurso--curva { width: 150px; height: 223px; }
  .ca-recurso--circulos { width: 462px; height: 220px; }
}

/* Posición de cada recurso, tomada del archivo. */
.ca-presencia__curva   { left: 834.9px;  top: 322px; }
.ca-conversion__curva  { left: 834.9px;  top: 74px;  }
.ca-relacionados__circulos { left: 1120px; top: 445px; }
@media (max-width: 640px) {
  .ca-presencia__curva, .ca-conversion__curva { left: auto; right: -40px; top: 40px; }
  .ca-relacionados__circulos { left: 220px; top: auto; bottom: 0; }
}

/* -------------------------------------------------------------------------
 * La planta · ciclo de valorización (nodo 191:98)
 * Cuatro fotos de 280x200 con la esquina inferior alternando lado.
 * ---------------------------------------------------------------------- */
.ca-ciclo { position: relative; overflow: hidden; padding: 0; background: var(--ca-gris-100); }
.ca-ciclo .ca-wrap { position: relative; z-index: 1; padding: 92px 24px 58px; }
.ca-ciclo .ca-h2 { margin: 44px 0 0; max-width: 820px; line-height: 54px; }
.ca-ciclo__circulos { left: 1120px; top: 474px; }
.ca-ciclo__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 280px));
  justify-content: start;
  column-gap: 52px;
  margin-top: 56px;
}
.ca-ciclo__it img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom-left-radius: 80px;
}
.ca-ciclo__it:nth-child(even) img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 80px;
}
.ca-ciclo__it h3 {
  margin: 24px 0 0;
  /* «Recepción de subproductos» cabe en una línea en el archivo y en el
     navegador se pasaba por cinco píxeles. Se le deja invadir el hueco entre
     columnas, que son 52 y están vacíos. */
  width: 300px;
  max-width: none;
  letter-spacing: -.015em;
  font-size: 22px;
  font-weight: 300;
  line-height: 26px;
  color: var(--ca-azul);
}
.ca-ciclo__it p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--ca-gris-900);
}

@media (max-width: 640px) {
  /* En 390 (193:98) las cuatro fichas van casi pegadas: 12 entre una y la
     siguiente, no 36. Con 36 el bloque se iba 110px y el ultimo texto
     terminaba 104 por debajo de donde lo pone el archivo. */
  .ca-ciclo .ca-wrap { padding: 58px 24px 48px; }
  .ca-ciclo .ca-h2 { margin-top: 32px; line-height: 38px; }
  .ca-ciclo__lista { grid-template-columns: 1fr; row-gap: 12px; margin-top: 12px; }
  .ca-ciclo__it h3 { width: auto; }
  .ca-ciclo__circulos { left: 220px; top: auto; bottom: 0; }
}


/* Títulos pequeños de tarjeta: el archivo los maqueta en Montserrat Light, no
   en la tipografía de titulares. Además, forzar Redonda aquí hacía que las
   líneas partieran donde el archivo no las parte. */
.ca-ciclo__it h3,
.ca-etapas2__it h3,
.ca-cred2__it h3,
.ca-presencia__pais h3,
.ca-tarjeta-post h3,
.ca-canal strong {
  font-family: var(--ca-sans);
}


/* Cabecera con vídeo: va por debajo de los dos velos, que siguen siendo los
   fondos del propio .ca-cab__foto. La foto queda de póster y de respaldo si
   el navegador no puede reproducirlo o el visitante pidió menos movimiento. */
.ca-cab__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ca-cab__foto:has(.ca-cab__video) { background-color: var(--ca-azul-osc); }
@media (prefers-reduced-motion: reduce) {
  .ca-cab__video { display: none; }
}

/* =========================================================================
 * 21 · Landing · Limpieza de trampas de grasa (nodo 3:2)
 * ====================================================================== */
.ca-lp-hero { position: relative; overflow: hidden; padding: 0; background: var(--ca-blanco); }
.ca-lp-hero__foto {
  position: absolute;
  inset: 0 0 auto 0;
  height: 972px;
  background-image: var(--lp-foto);
  background-position: center bottom;
  background-size: cover;
  pointer-events: none;
}
/* El archivo apila TRES veces el mismo velo horizontal, más el vertical de
   arriba. Medido sobre el export con la foto correcta, el apilado reproduce el
   perfil real (1.00 a la izquierda, .96 al 36%, .70 al 71%, .34 al final). */
.ca-lp-hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(var(--ca-velo), .50) 0%, rgba(var(--ca-velo), .18) 55%, rgba(var(--ca-velo), 0) 100%),
    linear-gradient(90deg, rgba(var(--ca-velo), .80) 0%, rgba(var(--ca-velo), .52) 34%, rgba(var(--ca-velo), .20) 68%, rgba(var(--ca-velo), .05) 100%);
  background-repeat: no-repeat;
  background-position: top left, center;
  background-size: 100% 320px, cover;
}
.ca-lp-hero .ca-wrap { position: relative; z-index: 1; padding: 100px 24px 112px; }

.ca-lp-hero__marca {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  font-family: var(--ca-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ca-blanco);
}
.ca-lp-hero__marca::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 4px;
  height: 84px;
  background: var(--ca-verde);
}
.ca-lp-hero__marca span:last-child { font-weight: 400; color: var(--ca-azul-tenue); }
.ca-lp-hero__marca span:first-child { font-weight: 500; }

.ca-lp-hero h1 {
  margin: 276px 0 0;
  font-family: var(--ca-sans);
  font-size: 88px;
  font-weight: 300;
  line-height: 92px;
  letter-spacing: -1.5px;
  color: var(--ca-blanco);
}
.ca-lp-hero h1 strong { display: block; font-weight: 700; }
.ca-lp-hero__regla { display: block; width: 140px; height: 3px; margin: 48px 0 0; background: var(--ca-verde); }
.ca-lp-hero__pie {
  max-width: 720px;
  margin: 35px 0 0;
  font-size: 18px;
  line-height: 29px;
  color: var(--ca-blanco);
}
.ca-lp-hero__acciones { display: flex; align-items: flex-start; gap: 139px; margin-top: 38px; }
.ca-lp-btn {
  display: inline-flex;
  align-items: center;
  padding: 20px 34px;
  border-radius: 15px;
  background: var(--ca-verde);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .2px;
  color: var(--ca-azul-osc);
  text-decoration: none;
}
.ca-lp-hero__ancla {
  align-self: flex-start;
  margin-top: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ca-blanco);
  text-decoration: none;
}
.ca-lp-hero__prueba {
  /* El filete mide 560 pero el texto no se parte: va en una línea de 663. */
  margin: 40px 0 0;
  padding-top: 21px;
  background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)) top left / 560px 1px no-repeat;
  white-space: nowrap;
  font-family: var(--ca-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.6px;
  color: rgba(255, 255, 255, .82);
}

@media (max-width: 640px) {
  .ca-lp-hero__foto { height: 560px; }
  .ca-lp-hero__foto::after { background-size: 100% 200px, cover; }
  .ca-lp-hero .ca-wrap { padding: 56px 24px 64px; }
  .ca-lp-hero__marca { gap: 6px; padding-left: 16px; }
  .ca-lp-hero__marca::before { width: 3px; height: 60px; }
  .ca-lp-hero h1 { margin-top: 90px; font-size: 40px; line-height: 46px; letter-spacing: -.8px; }
  .ca-lp-hero__regla { margin-top: 32px; }
  .ca-lp-hero__pie { margin-top: 24px; font-size: 16px; line-height: 27px; }
  .ca-lp-hero__acciones { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 36px; }
  .ca-lp-hero__ancla { margin-top: 0; }
  .ca-lp-hero__prueba { margin-top: 40px; white-space: normal; background-size: 100% 1px; }
}

/* -------------------------------------------------------------------------
 * 22 · Submenú de Servicios
 * El archivo no lo dibuja: es una decisión de arquitectura del sitio. Se abre
 * con el ratón y también con el teclado (:focus-within), y en móvil se queda
 * desplegado dentro del panel, que ya es una lista vertical.
 * ---------------------------------------------------------------------- */
.ca-nav li { position: relative; }
.ca-nav .sub-menu {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: -20px;
  display: block;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 268px;
  margin: 0;
  padding: 10px 0;
  border-radius: 14px;
  background: var(--ca-blanco);
  box-shadow: 0 18px 44px rgba(0, 35, 79, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.ca-nav li:hover > .sub-menu,
.ca-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Escape lo cierra aunque el foco siga dentro del <li> (el enlace padre
   también cuenta para :focus-within). */
.ca-nav li.ca-cerrado > .sub-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}
/* Puente invisible para que no se cierre al bajar el ratón hacia el panel. */
.ca-nav .menu-item-has-children > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}
.ca-nav .sub-menu a {
  display: block;
  padding: 11px 20px;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--ca-gris-900);
}
.ca-nav .sub-menu a:hover,
.ca-nav .sub-menu .current-menu-item a { color: var(--ca-azul-vivo); }

/* La flecha del padre. */
.ca-nav .menu-item-has-children > a {
  position: relative;
  padding-right: 15px;
}
.ca-nav .menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 640px) {
  .ca-nav .sub-menu {
    position: static;
    min-width: 0;
    margin: 0 0 4px;
    padding: 0 0 8px 16px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .ca-nav .sub-menu li { border-bottom: 0; }
  .ca-nav .sub-menu a { padding: 9px 0; font-size: 15px; }
  .ca-nav .menu-item-has-children > a::after { content: none; }
  .ca-nav .menu-item-has-children > a::before { display: none; }
}

/* -------------------------------------------------------------------------
 * 23 · Control de pausa del vídeo de fondo (WCAG 2.2.2)
 * Discreto abajo a la derecha de la cabecera, sobre el velo, para no competir
 * con el titular. Mismo lenguaje que el pausador del carrusel de la portada.
 * ---------------------------------------------------------------------- */
.ca-cab__pausa {
  position: absolute;
  z-index: 2;
  right: 40px;
  bottom: 76px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: rgba(8, 20, 34, .38);
  cursor: pointer;
  transition: background var(--ca-tr), border-color var(--ca-tr);
}
.ca-cab__pausa:hover { background: rgba(8, 20, 34, .62); border-color: rgba(255, 255, 255, .7); }
.ca-cab__pausa:focus-visible { outline: 2px solid var(--ca-verde); outline-offset: 3px; }
/* Dos barras = pausar. */
.ca-cab__pausa span {
  display: block;
  width: 12px;
  height: 13px;
  border-left: 3.5px solid #fff;
  border-right: 3.5px solid #fff;
}
/* Triángulo = reanudar. */
.ca-cab__pausa.is-pausado span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #fff;
}
@media (max-width: 640px) {
  .ca-cab__pausa { right: 20px; bottom: 60px; width: 40px; height: 40px; }
}

/* =========================================================================
 * 24 · Movimiento
 *
 * Criterio: el diseño es sobrio, así que nada de rebotes ni desplazamientos
 * largos. Solo tres cosas — la entrada al hacer scroll, una respuesta clara
 * al pasar el ratón, y que las fotos respiren. Todo por debajo de 700 ms y
 * todo apagado si el visitante pidió menos movimiento.
 * ====================================================================== */

/* La entrada gana un pelo de recorrido y una curva menos mecánica.
   Ojo: el desplazamiento va en :not(.is-visible). Si se pone en .ca-js .ca-ap
   a secas, gana por orden a .ca-ap.is-visible (misma especificidad) y las
   tarjetas se quedan 26px por debajo para siempre. */
/* (La entrada de .ca-ap vive ahora en la seccion 30.) */

/* --- Tarjetas: se levantan y la foto se acerca ------------------------- */
.ca-tarjeta-post,
.ca-ciclo__it,
.ca-cred2__it,
.ca-canal {
  transition: transform var(--ca-tr);
}
.ca-tarjeta-post:hover,
.ca-ciclo__it:hover { transform: translateY(-4px); }

.ca-tarjeta-post__img,
.ca-ciclo__it { overflow: hidden; }
.ca-tarjeta-post__img img,
.ca-ciclo__it img,
.ca-destacado__foto img {
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
}
.ca-tarjeta-post:hover .ca-tarjeta-post__img img,
.ca-ciclo__it:hover img,
.ca-destacado__foto:hover img { transform: scale(1.045); }

/* --- Enlaces con flecha: la flecha avanza ------------------------------ */
.ca-enlace,
.ca-lp-hero__ancla { transition: color var(--ca-tr), border-color var(--ca-tr); }
.ca-enlace::after,
.ca-lp-hero__ancla::after { content: ""; }
.ca-enlace,
.ca-lp-hero__ancla { position: relative; }
/* El «→» lo aisla el JS en un .ca-punta y se desplaza solo el (seccion 30).
   Ensanchar el letter-spacing del enlace entero recomponia el texto en cada
   pasada del raton. */

/* --- Botones ---------------------------------------------------------- */
.ca-lp-btn,
.ca-conversion__btn {
  transition: transform var(--ca-tr), box-shadow var(--ca-tr), filter var(--ca-tr);
}
.ca-lp-btn:hover,
.ca-conversion__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 207, 96, .28);
}
.ca-lp-btn:active,
.ca-conversion__btn:active { transform: scale(.975); }

/* --- Iconos de marca -------------------------------------------------- */
.ca-icono--marca { transition: transform var(--ca-tr); }
.ca-canal:hover .ca-icono--marca,
.ca-cred2__it:hover .ca-icono--marca { transform: translateY(-3px); }

/* --- Fotos de cabecera: un acercamiento lento al cargar ---------------- */
@keyframes ca-respira {
  from { transform: scale(1.055); }
  to   { transform: scale(1); }
}
.ca-js .ca-cab__foto,
.ca-js .ca-lp-hero__foto {
  animation: ca-respira 1600ms cubic-bezier(.22, .61, .36, 1) both;
}
/* El pseudo de los velos no debe escalar con la foto. */
.ca-cab__foto::after,
.ca-lp-hero__foto::after { transform: none; }

/* --- El rotulo: la firma que se repite en todas las secciones ---------
 * Filete verde que se traza de arriba abajo y, detras, la linea mono que
 * sube por debajo de su propia mascara. Dos trazos y un solo gesto, el
 * mismo que el de los titulares: asi el rotulo y el titular se leen como
 * una sola pieza y no como dos efectos distintos pegados.
 * Antes iba con @keyframes; en transiciones se puede interrumpir y
 * retomar, que es lo que hace falta si el visitante sube y baja rapido.
 * -------------------------------------------------------------------- */
.ca-js .ca-rot-anim::before {
  transform-origin: top;
  transition: transform 520ms var(--ca-e-panel) var(--ca-d);
}
.ca-js .ca-rot-anim:not(.is-visible)::before { transform: scaleY(0); }
/* La linea entra despues del filete, no a la vez. */
.ca-js .ca-rot-anim .ca-ln__i { transition-duration: 560ms; transition-delay: 150ms; }

/* --- Las cifras cuentan ------------------------------------------------
 * En una web cuyo argumento es «cada lote, medido y registrado», la unica
 * animacion que significa algo es ver subir el numero. tabular-nums y el
 * ancho reservado por el JS evitan que la cifra baile mientras cuenta. */
.ca-cifra { font-variant-numeric: tabular-nums; }

/* --- Menú: el desplegable ya trae su transición; el subrayado del nav --- */
.ca-nav > ul > li > a { position: relative; }
.ca-nav > ul > li > a::before { transition: transform 240ms cubic-bezier(.22, .61, .36, 1); }

/* Todo lo anterior se apaga si el sistema pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .ca-js .ca-cab__foto,
  .ca-js .ca-lp-hero__foto { animation: none; }
  .ca-js .ca-ap.is-visible .ca-rotulo::before,
  .ca-js .ca-ap.is-visible .ca-rotulo1::before { animation: none; }
  .ca-tarjeta-post:hover,
  .ca-ciclo__it:hover,
  .ca-lp-btn:hover,
  .ca-conversion__btn:hover { transform: none; }
  .ca-tarjeta-post:hover .ca-tarjeta-post__img img,
  .ca-ciclo__it:hover img,
  .ca-destacado__foto:hover img { transform: none; }
  .ca-canal:hover .ca-icono--marca,
  .ca-cred2__it:hover .ca-icono--marca { transform: none; }
}

/* -------------------------------------------------------------------------
 * Landing · franja de credenciales (51:2)
 * Cuatro pares rótulo/dato sobre azul, separados por reglas verticales.
 * ---------------------------------------------------------------------- */
.ca-lp-cred { padding: 0; background: var(--ca-azul); }
.ca-lp-cred .ca-wrap { padding: 30px 24px 26px; }
.ca-lp-cred__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 288px));
  justify-content: start;
  column-gap: 40px;
  margin: 0;
}
.ca-lp-cred__it { position: relative; }
.ca-lp-cred__it + .ca-lp-cred__it::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -2px;
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, .22);
}
.ca-lp-cred__it dt {
  margin: 0;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ca-cian);
}
.ca-lp-cred__it dd {
  margin: 7px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: .1px;
  color: var(--ca-blanco);
}

/* -------------------------------------------------------------------------
 * Landing · el riesgo (51:14)
 * Texto a la izquierda y foto a la derecha con la esquina superior izquierda
 * muy redondeada (300). Debajo, tres puntos numerados entre reglas.
 * ---------------------------------------------------------------------- */
.ca-lp-riesgo {
  position: relative;
  padding: 0;
  background: var(--ca-blanco);
  border-top: 1px solid var(--ca-gris-300);
}
.ca-lp-riesgo .ca-wrap { position: relative; z-index: 1; padding: 100px 24px 128px; }
.ca-lp-riesgo__foto {
  position: absolute;
  top: 0;
  left: 740px;
  width: 700px;
  height: 717px;
  border-top-left-radius: 300px;
  overflow: hidden;
}
.ca-lp-riesgo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-lp-riesgo h2 {
  max-width: 880px;
  margin: 78px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 52px;
  letter-spacing: -.8px;
  color: var(--ca-azul);
}
.ca-lp-riesgo h2 strong { display: block; font-weight: 700; }
.ca-lp-riesgo__pie {
  max-width: 580px;
  margin: 44px 0 0;
  font-size: 17px;
  line-height: 29px;
  color: var(--ca-gris-900);
}
.ca-lp-puntos { margin: 44px 0 0; padding: 0; list-style: none; max-width: 580px; }
.ca-lp-puntos li {
  position: relative;
  padding: 20px 0 20px 48px;
  border-top: 1px solid var(--ca-gris-300);
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: .1px;
  color: var(--ca-gris-900);
  /* El archivo deja que el texto se salga del filete: la regla mide 580 y la
     frase llega a 670. Sin esto la primera parte en dos líneas y descuadra. */
  white-space: nowrap;
}
.ca-lp-puntos li:last-child { border-bottom: 1px solid var(--ca-gris-300); }
.ca-lp-puntos li::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1px;
  color: var(--ca-verde-osc);
}

@media (max-width: 640px) {
  .ca-lp-cred .ca-wrap { padding: 28px 24px 24px; }
  .ca-lp-cred__lista { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .ca-lp-cred__it + .ca-lp-cred__it::before { content: none; }
  .ca-lp-riesgo .ca-wrap { padding: 64px 24px 56px; }
  .ca-lp-riesgo__foto { position: relative; left: auto; top: auto; width: auto; height: 300px; margin: 0 0 32px; border-top-left-radius: 120px; }
  .ca-lp-riesgo h2 { font-size: 30px; line-height: 38px; }
  .ca-lp-riesgo__pie { margin-top: 26px; font-size: 16px; line-height: 27px; }
  .ca-lp-puntos { margin-top: 32px; }
  .ca-lp-puntos li { white-space: normal; }
}

/* El rótulo de «lo que dice la ley» va en gris, no en verde oscuro. */
.ca-rotulo1--gris { color: var(--ca-gris-900); letter-spacing: 2.2px; }

/* -------------------------------------------------------------------------
 * Landing · el servicio (63:2)
 * Seis tarjetas sobre una malla gris que asoma por los huecos de 1px, con
 * las cuatro esquinas exteriores redondeadas a 27.
 * ---------------------------------------------------------------------- */
/* Segunda variante de icono del sistema: ficha clara de 72 con radio 16 y
   glifo de 32 (el manual la llama «ficha 72x72 r16»). */
.ca-icono--ficha {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 16px;
  background: var(--ca-gris-100);
  color: var(--ca-azul);
}
.ca-icono--ficha svg { inline-size: 32px; block-size: 32px; }

.ca-lp-serv {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--ca-gris-100);
  border-top: 1px solid var(--ca-gris-300);
}
.ca-lp-serv .ca-wrap { position: relative; z-index: 1; padding: 92px 24px 105px; }
.ca-lp-serv h2 {
  margin: 72px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 52px;
  letter-spacing: -.8px;
  color: var(--ca-azul);
}
.ca-lp-serv h2 strong { display: block; font-weight: 700; }
.ca-lp-serv__circulos {
  position: absolute;
  inset: 128px auto auto 1000px;
  width: 376px;
  height: 176px;
}

.ca-lp-serv__malla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 98px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--ca-gris-300);
}
.ca-lp-serv__it {
  min-height: 279px;
  /* Abajo solo 9: el archivo deja la tarjeta ajustada al texto más largo. */
  padding: 40px 40px 9px;
  background: var(--ca-blanco);
}
.ca-lp-serv__it .ca-icono { margin-bottom: 28px; }
.ca-lp-serv__num {
  display: block;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 1.8px;
  color: var(--ca-gris-900);
}
.ca-lp-serv__it h3 {
  max-width: 357px;
  margin: 9px 0 0;
  font-family: var(--ca-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -.2px;
  color: var(--ca-azul);
}
.ca-lp-serv__it p {
  max-width: 353px;
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--ca-gris-900);
}

@media (max-width: 640px) {
  .ca-lp-serv .ca-wrap { padding: 64px 24px 56px; }
  .ca-lp-serv h2 { margin-top: 40px; font-size: 30px; line-height: 38px; }
  .ca-lp-serv__circulos { display: none; }
  .ca-lp-serv__malla { grid-template-columns: 1fr; margin-top: 40px; border-radius: 20px; }
  .ca-lp-serv__it { min-height: 0; padding: 28px 24px; }
  .ca-icono--ficha { inline-size: 60px; block-size: 60px; border-radius: 14px; }
  .ca-icono--ficha svg { inline-size: 28px; block-size: 28px; }
}

/* -------------------------------------------------------------------------
 * Landing · la diferencia (52:2)
 * Dos columnas enfrentadas. La izquierda es el servicio informal: guion gris
 * y texto apagado. La derecha, la nuestra: cuadrito verde y texto en negrita,
 * sobre un panel blanco que la levanta del fondo gris.
 * ---------------------------------------------------------------------- */
.ca-lp-dif {
  position: relative;
  padding: 0;
  background: var(--ca-gris-100);
  border-top: 1px solid var(--ca-gris-300);
}
.ca-lp-dif__panel {
  position: absolute;
  top: 284px;
  left: 740px;
  width: 636px;
  height: 432px;
  border-radius: 28px;
  background: var(--ca-blanco);
}
.ca-lp-dif .ca-wrap { position: relative; z-index: 1; padding: 92px 24px 75px; }
.ca-lp-dif h2 {
  margin: 72px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 52px;
  letter-spacing: -.8px;
  color: var(--ca-azul);
}
.ca-lp-dif h2 strong { display: block; font-weight: 700; }

.ca-lp-dif__cols {
  display: grid;
  grid-template-columns: 612px 564px;
  column-gap: 100px;
  margin-top: 34px;
}
.ca-lp-dif__tit {
  display: block;
  margin: 0 0 30px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ca-gris-900);
}
.ca-lp-dif__col--nos .ca-lp-dif__tit { color: var(--ca-azul-vivo); }

.ca-lp-dif ul { margin: 0; padding: 0; list-style: none; }
.ca-lp-dif li {
  position: relative;
  padding: 24px 0 22px 24px;
  border-top: 1px solid var(--ca-gris-300);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: .1px;
}
.ca-lp-dif li:last-child { border-bottom: 1px solid var(--ca-gris-300); }
/* Las reglas de la columna nuestra van más suaves. */
.ca-lp-dif__col--nos li { border-color: rgba(217, 217, 217, .6); }

.ca-lp-dif__col--otros li { color: var(--ca-gris-700); }
.ca-lp-dif__col--otros li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 34px;
  width: 10px;
  height: 1px;
  background: var(--ca-gris-700);
}
.ca-lp-dif__col--nos li { font-weight: 600; color: var(--ca-gris-900); }
.ca-lp-dif__col--nos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--ca-verde);
}

@media (max-width: 640px) {
  .ca-lp-dif__panel { display: none; }
  .ca-lp-dif .ca-wrap { padding: 64px 24px 56px; }
  .ca-lp-dif h2 { margin-top: 40px; font-size: 30px; line-height: 38px; }
  .ca-lp-dif__cols { grid-template-columns: 1fr; row-gap: 40px; margin-top: 32px; }
  .ca-lp-dif__col--nos {
    padding: 24px 20px 4px;
    border-radius: 20px;
    background: var(--ca-blanco);
  }
}

/* -------------------------------------------------------------------------
 * Landing · franja de clientes (111:52)
 * Como la de las internas pero sin banda azul, con la malla más compacta
 * (217x123) y una última celda que lleva una cifra en vez de logotipo.
 * ---------------------------------------------------------------------- */
.ca-lp-clientes {
  padding: 0;
  background: var(--ca-blanco);
  border-top: 1px solid var(--ca-gris-300);
}
.ca-lp-clientes .ca-wrap { padding: 92px 24px 49px; }
.ca-lp-clientes h2 {
  margin: 72px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 52px;
  letter-spacing: -.8px;
  color: var(--ca-azul);
}
.ca-lp-clientes h2 strong { display: block; font-weight: 700; }
.ca-lp-clientes__malla {
  display: grid;
  gap: 1px;
  margin-top: 62px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ca-gris-300);
}
.ca-lp-clientes__fila { display: grid; gap: 1px; }
.ca-lp-clientes__fila--6 { grid-template-columns: repeat(6, 1fr); }
.ca-lp-clientes__fila--5 { grid-template-columns: repeat(6, 1fr); }
.ca-lp-clientes__celda {
  display: grid;
  place-items: center;
  height: 123px;
  background: var(--ca-blanco);
}
.ca-lp-clientes__celda img { width: 158px; height: 75px; object-fit: contain; }
/* La celda de cifra cierra la segunda fila. */
.ca-lp-clientes__cifra {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 0 30px;
  height: 123px;
  background: var(--ca-blanco);
}
.ca-lp-clientes__cifra b {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ca-azul);
}
.ca-lp-clientes__cifra span {
  font-family: var(--ca-mono);
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 1.2px;
  color: var(--ca-gris-900);
}
.ca-lp-clientes__fuente {
  margin: 28px 0 0;
  font-family: var(--ca-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--ca-gris-900);
}

@media (max-width: 640px) {
  .ca-lp-clientes .ca-wrap { padding: 64px 24px 48px; }
  .ca-lp-clientes h2 { margin-top: 40px; font-size: 30px; line-height: 38px; }
  .ca-lp-clientes__malla { margin-top: 36px; }
  .ca-lp-clientes__fila--6,
  .ca-lp-clientes__fila--5 { grid-template-columns: repeat(3, 1fr); }
  .ca-lp-clientes__celda, .ca-lp-clientes__cifra { height: 92px; }
  .ca-lp-clientes__celda img { width: 104px; height: 50px; }
  .ca-lp-clientes__cifra { padding: 0 16px; }
  .ca-lp-clientes__cifra b { font-size: 16px; line-height: 20px; }
}

/* -------------------------------------------------------------------------
 * Landing · cómo funciona (53:2)
 * Cuatro paneles a sangre de 360x440. Los tres primeros son foto con
 * degradado azul; el cuarto es verde macizo y cierra la fila.
 * ---------------------------------------------------------------------- */
.ca-lp-pasos { position: relative; overflow: hidden; padding: 0 0 56px; background: var(--ca-blanco); }
.ca-lp-pasos .ca-wrap { padding: 84px 24px 0; }
.ca-lp-pasos h2 {
  max-width: 620px;
  margin: 64px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 52px;
  letter-spacing: -.8px;
  color: var(--ca-azul);
}
.ca-lp-pasos h2 strong { display: block; font-weight: 700; }
.ca-lp-pasos__lead {
  position: absolute;
  top: 214px;
  left: 740px;
  width: 520px;
  margin: 0;
  font-size: 17px;
  line-height: 28px;
  color: var(--ca-gris-900);
}

.ca-lp-pasos__fila {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
}
.ca-lp-pasos__it {
  position: relative;
  height: 440px;
  padding: 28px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  color: var(--ca-blanco);
}
.ca-lp-pasos__it:first-child { border-top-left-radius: 36px; }
.ca-lp-pasos__it:last-child { border-top-right-radius: 36px; }
/* Separador entre paneles. */
.ca-lp-pasos__it + .ca-lp-pasos__it::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, .22);
  z-index: 2;
}
/* El velo azul que hace legible el texto sobre la foto. */
.ca-lp-pasos__it--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 35, 79, .55) 0%, rgba(0, 35, 79, .30) 32%, rgba(0, 35, 79, .94) 100%);
}
.ca-lp-pasos__it > * { position: relative; z-index: 1; }
.ca-lp-pasos__it--verde { background: var(--ca-verde); color: var(--ca-azul-osc); }
.ca-lp-pasos__circulo {
  position: absolute;
  z-index: 0;
  top: -60px;
  left: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
}
.ca-lp-pasos__num {
  display: block;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 2px;
}
.ca-lp-pasos__it hr {
  width: 28px;
  height: 2px;
  margin: 12px 0 0;
  border: 0;
  background: var(--ca-verde);
}
.ca-lp-pasos__it--verde hr { background: var(--ca-azul-osc); }
.ca-lp-pasos__it h3 {
  max-width: 300px;
  margin: 178px 0 0;
  font-family: var(--ca-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -.2px;
  color: inherit;
}
.ca-lp-pasos__it p {
  max-width: 296px;
  margin: 34px 0 0;
  font-size: 14px;
  line-height: 23px;
  opacity: .82;
}

@media (max-width: 640px) {
  .ca-lp-pasos .ca-wrap { padding: 64px 24px 0; }
  .ca-lp-pasos h2 { margin-top: 40px; font-size: 30px; line-height: 38px; }
  .ca-lp-pasos__lead { position: static; width: auto; margin-top: 24px; font-size: 16px; line-height: 27px; }
  .ca-lp-pasos__fila { grid-template-columns: 1fr 1fr; margin-top: 36px; }
  /* Alto minimo, no fijo: con height:340 y overflow:hidden las descripciones
     de dos de los cuatro pasos salian cortadas por la mitad. */
  .ca-lp-pasos__it { height: auto; min-height: 340px; padding: 22px 22px 28px; }
  .ca-lp-pasos__it:nth-child(2) { border-top-right-radius: 36px; }
  .ca-lp-pasos__it:last-child { border-top-right-radius: 0; }
  .ca-lp-pasos__it h3 { margin-top: 120px; font-size: 18px; line-height: 24px; }
  .ca-lp-pasos__it p { margin-top: 16px; }
  .ca-lp-pasos__circulo { display: none; }
}

/* -------------------------------------------------------------------------
 * Landing · banda de La planta (54:2)
 * Foto aérea a sangre con degradado horizontal, enlace a la interna y, a la
 * derecha, los tres pasos del proceso en una lista con reglas.
 * ---------------------------------------------------------------------- */
.ca-lp-planta { position: relative; overflow: hidden; padding: 0; background: var(--ca-azul-osc); }
.ca-lp-planta__foto {
  position: absolute;
  inset: 0 0 auto 0;
  height: 560px;
  background-image: var(--lp-planta-foto);
  background-position: center;
  background-size: cover;
}
.ca-lp-planta__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 35, 79, .95) 0%, rgba(0, 35, 79, .70) 45%, rgba(0, 35, 79, .66) 100%);
}
.ca-lp-planta .ca-wrap { position: relative; z-index: 1; padding: 100px 24px 107px; }
.ca-lp-planta .ca-rotulo1 { color: var(--ca-azul-tenue); letter-spacing: 2.2px; }
.ca-lp-planta h2 {
  margin: 82px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 54px;
  letter-spacing: -.8px;
  color: var(--ca-blanco);
}
.ca-lp-planta h2 strong { display: block; font-weight: 700; }
.ca-lp-planta__pie {
  max-width: 520px;
  margin: 40px 0 0;
  font-size: 17px;
  line-height: 28px;
  color: var(--ca-blanco);
}
.ca-lp-planta__enlace {
  display: inline-block;
  margin-top: 36px;
  padding-bottom: 10px;
  width: 268px;
  border-bottom: 1px solid var(--ca-verde);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ca-verde);
  text-decoration: none;
}
.ca-lp-planta__firma {
  margin: 34px 0 0;
  font-family: var(--ca-mono);
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 2px;
  color: var(--ca-cian);
}
/* Los tres pasos, a la derecha. */
.ca-lp-planta__pasos {
  position: absolute;
  top: 196px;
  left: 940px;
  width: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ca-lp-planta__pasos li {
  position: relative;
  padding: 22px 0 22px 48px;
  border-top: 1px solid rgba(255, 255, 255, .4);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -.1px;
  color: var(--ca-blanco);
}
.ca-lp-planta__pasos li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .28); }
.ca-lp-planta__pasos li::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: 26px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1.4px;
  color: var(--ca-verde);
}
.ca-lp-planta__capsulas {
  position: absolute;
  inset: 300px auto auto 1080px;
  width: 300px;
  height: 300px;
  opacity: .22;
  overflow: hidden;
}

@media (max-width: 640px) {
  .ca-lp-planta__foto { height: 100%; }
  .ca-lp-planta .ca-wrap { padding: 64px 24px 56px; }
  .ca-lp-planta h2 { margin-top: 40px; font-size: 30px; line-height: 38px; }
  .ca-lp-planta__pie { margin-top: 26px; font-size: 16px; line-height: 27px; }
  .ca-lp-planta__enlace { width: auto; min-width: 200px; }
  .ca-lp-planta__pasos { position: static; width: auto; margin-top: 40px; }
  .ca-lp-planta__capsulas { display: none; }
}

/* El patrón de cápsulas también sale en la banda de La planta, a otra escala. */
.ca-recurso--capsulas i { position: absolute; width: 42px; height: 96px; border-radius: 21px; }
.ca-recurso--capsulas i.llena { background: var(--ca-blanco); }
.ca-recurso--capsulas i.hueca { border: 2px solid var(--ca-blanco); }


/* -------------------------------------------------------------------------
 * Landing · preguntas (54:36)
 * Titular a la izquierda y las cinco preguntas a la derecha, cada una entre
 * reglas y con su numero en verde.
 * ---------------------------------------------------------------------- */
.ca-lp-faq {
  position: relative;
  padding: 0;
  min-block-size: 840px;
  background: var(--ca-gris-100);
  border-top: 1px solid var(--ca-gris-300);
}
.ca-lp-faq .ca-wrap { position: relative; padding: 100px 24px 44px; }
.ca-lp-faq h2 {
  margin: 78px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 52px;
  letter-spacing: -.8px;
  color: var(--ca-azul);
}
.ca-lp-faq h2 strong { display: block; margin-top: 14px; font-weight: 700; }
.ca-lp-faq__pie {
  max-width: 340px;
  margin: 30px 0 0;
  font-size: 15px;
  line-height: 25px;
  color: var(--ca-gris-900);
}
.ca-lp-faq__lista {
  position: absolute;
  top: 96px;
  left: 560px;
  width: 776px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ca-lp-faq__lista li {
  position: relative;
  padding: 21px 0 7px 48px;
  border-top: 1px solid var(--ca-gris-300);
}
.ca-lp-faq__lista li:last-child { border-bottom: 1px solid var(--ca-gris-300); }
.ca-lp-faq__lista li::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: 26px;
  font-family: var(--ca-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1px;
  color: var(--ca-verde-osc);
}
.ca-lp-faq__lista h3 {
  margin: 0;
  max-inline-size: 720px;
  font-family: var(--ca-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -.2px;
  color: var(--ca-azul);
}
.ca-lp-faq__lista p {
  max-width: 576px;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 25px;
  color: var(--ca-gris-900);
}

@media (max-width: 640px) {
  .ca-lp-faq { min-block-size: 0; }
  .ca-lp-faq .ca-wrap { padding: 64px 24px 48px; }
  .ca-lp-faq h2 { margin-top: 40px; font-size: 30px; line-height: 38px; }
  .ca-lp-faq h2 strong { margin-top: 0; }
  .ca-lp-faq__pie { margin-top: 24px; }
  .ca-lp-faq__lista { position: static; width: auto; margin-top: 40px; }
  .ca-lp-faq__lista li { padding-left: 40px; }
}

/* -------------------------------------------------------------------------
 * Landing · declaracion D.L. 1278 (71:27)
 * Banda verde con la cifra gigante al fondo. Todo va colocado en absoluto
 * porque el archivo compone el titular en tres piezas separadas.
 * ---------------------------------------------------------------------- */
.ca-lp-dl {
  position: relative;
  padding: 0;
  block-size: 836px;
  background: var(--ca-verde);
  overflow: hidden;
}
.ca-lp-dl .ca-wrap { position: relative; block-size: 100%; }
.ca-lp-dl .ca-wrap > * { position: absolute; margin: 0; color: var(--ca-azul); }
.ca-lp-dl__cifra {
  top: 150px;
  left: 636px;
  inline-size: 700px;
  block-size: 260px;
  font-size: 252px;
  font-weight: 700;
  line-height: 252px;
  letter-spacing: -8px;
  text-align: right;
  color: #00234f;
  opacity: .22;
  pointer-events: none;
}
.ca-lp-dl__rot {
  top: 120px;
  left: 24px;
  font-family: var(--ca-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.ca-lp-dl__h2 {
  top: 0;
  left: 0;
  right: 0;
  block-size: 100%;
  font-size: inherit;
  font-weight: inherit;
}
.ca-lp-dl__h2 span {
  position: absolute;
  left: 24px;
  font-size: 74px;
  line-height: 80px;
  letter-spacing: -2px;
  white-space: nowrap;
}
.ca-lp-dl__l1 { top: 424px; font-weight: 300; }
.ca-lp-dl__l2 { top: 518px; font-weight: 700; }
.ca-lp-dl__l3 { top: 700px; font-weight: 300; }
.ca-lp-dl__filete {
  top: 490px;
  left: 24px;
  inline-size: 140px;
  block-size: 4px;
  background: var(--ca-azul);
}
.ca-lp-dl__lead {
  top: 614px;
  left: 24px;
  inline-size: 700px;
  font-size: 18px;
  font-weight: 500;
  line-height: 29px;
  opacity: .82;
}
.ca-lp-dl__regla {
  top: 414px;
  left: 936px;
  inline-size: 400px;
  block-size: 1px;
  background: var(--ca-azul);
  opacity: .35;
}
.ca-lp-dl__ref {
  top: 428px;
  left: 936px;
  inline-size: 400px;
  block-size: 16px;
  font-family: var(--ca-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 2px;
  text-align: right;
  text-transform: uppercase;
  opacity: .85;
}

@media (max-width: 640px) {
  .ca-lp-dl { block-size: auto; padding: 64px 0 56px; }
  .ca-lp-dl .ca-wrap { display: flex; flex-direction: column; }
  .ca-lp-dl .ca-wrap > *,
  .ca-lp-dl__h2 span { position: static; }
  .ca-lp-dl__h2 { display: block; block-size: auto; }
  .ca-lp-dl__h2 span { display: block; font-size: 32px; line-height: 38px; letter-spacing: -.6px; white-space: normal; }
  .ca-lp-dl__cifra, .ca-lp-dl__regla { display: none; }
  /* Ojo: .ca-lp-dl .ca-wrap > * lleva margin:0 y gana en especificidad a una
     clase suelta; hay que repetir el descendiente para poder darles hueco. */
  .ca-lp-dl .ca-wrap > .ca-lp-dl__rot { display: block; margin: 0 0 30px; }
  .ca-lp-dl__h2 span + span { margin-top: 4px; }
  .ca-lp-dl .ca-wrap > .ca-lp-dl__filete { display: block; inline-size: 96px; margin: 26px 0 0; }
  .ca-lp-dl .ca-wrap > .ca-lp-dl__lead { inline-size: auto; margin: 26px 0 0; font-size: 15px; line-height: 26px; }
  .ca-lp-dl .ca-wrap > .ca-lp-dl__ref { display: block; block-size: auto; inline-size: auto; margin: 32px 0 0; text-align: left; order: 9; }
}

/* -------------------------------------------------------------------------
 * 25 · Servicios · indice con tarjetas de foto (201:32)
 * ---------------------------------------------------------------------- */
.ca-idx { padding: 0; background: #fff; }
.ca-idx .ca-wrap { position: relative; padding: 92px 24px 88px; }
.ca-idx__patron {
  position: absolute;
  top: -60px;
  left: 1040px;
  inline-size: 372px;
  block-size: 520px;
  opacity: .1;
  pointer-events: none;
}
.ca-idx h2 {
  max-inline-size: 900px;
  margin: 72px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 52px;
  color: var(--ca-azul);
}
.ca-idx__lead {
  max-inline-size: 660px;
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--ca-gris-900);
}
.ca-idx__familia {
  margin-top: 56px;
  padding-top: 19px;
  border-top: 1px solid var(--ca-gris-300);
}
.ca-idx__familia:first-of-type { margin-top: 64px; }
.ca-idx__familia > .ca-rotulo1 { padding-left: 0; }
.ca-idx__familia > .ca-rotulo1::before { display: none; }
.ca-idx__malla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  align-items: start;
  margin-top: 22px;
}
.ca-idx__tar { display: block; margin: 0; }
.ca-idx__tar img {
  display: block;
  inline-size: 100%;
  block-size: 150px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}
.ca-idx__tar .ca-idx__num {
  display: block;
  margin-top: 16px;
  font-family: var(--ca-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 1.6px;
  color: var(--ca-verde-osc);
}
.ca-idx__tar h3 {
  margin: 8px 0 0;
  font-family: var(--ca-sans);
  font-size: 22px;
  font-weight: 300;
  line-height: 29px;
  color: var(--ca-azul);
}
.ca-idx__tar p {
  max-inline-size: 300px;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--ca-gris-900);
}
.ca-idx__tar .ca-idx__ver {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ca-azul-vivo);
  text-decoration: none;
  white-space: pre;
}
.ca-idx__tar .ca-idx__ver:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .ca-idx__malla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-idx__patron { display: none; }
}
@media (max-width: 640px) {
  .ca-idx .ca-wrap { padding: 64px 24px 56px; }
  .ca-idx h2 { margin-top: 40px; font-size: 30px; line-height: 38px; }
  .ca-idx__malla { grid-template-columns: 1fr; gap: 36px; }
  .ca-idx__tar p { max-inline-size: none; }
}

/* -------------------------------------------------------------------------
 * 26 · Servicios · bloque de detalle (188:32 y hermanos)
 * Foto de 560 a un lado con una esquina de 140 y la columna de texto de 752
 * al otro. El primero lleva encima la curva de marca de 200.
 * ---------------------------------------------------------------------- */
.ca-serv2 {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.ca-serv2__foto {
  position: absolute;
  top: 0;
  inline-size: 560px;
  block-size: 100%;
  object-fit: cover;
}
.ca-serv2--der .ca-serv2__foto { right: 0; border-end-start-radius: 140px; }
.ca-serv2--izq .ca-serv2__foto { left: 0; border-end-end-radius: 140px; }

.ca-serv2--curva { padding-top: 200px; }
.ca-serv2--curva .ca-serv2__curva {
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 200px;
  background: var(--ca-azul);
  border-end-start-radius: 200px;
}
.ca-serv2--curva .ca-serv2__foto { top: 200px; block-size: calc(100% - 200px); }

.ca-serv2 .ca-wrap { position: relative; padding: 72px 24px; }
.ca-serv2__col { max-inline-size: 752px; }
.ca-serv2--izq .ca-serv2__col { margin-inline-start: 560px; }

.ca-serv2__num {
  display: block;
  margin-top: 22px;
  font-family: var(--ca-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 1.6px;
  color: var(--ca-verde-osc);
}
.ca-serv2 h2 {
  margin: 8px 0 0;
  font-family: var(--ca-sans);
  font-size: 26px;
  font-weight: 300;
  line-height: 30px;
  color: var(--ca-azul);
}
.ca-serv2__lead {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--ca-gris-900);
}
.ca-serv2__lista {
  max-inline-size: 732px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.ca-serv2__lista li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 24px;
  color: var(--ca-gris-900);
}
.ca-serv2__lista li + li { margin-top: 10px; }
.ca-serv2__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 3px;
  background: var(--ca-verde);
}
.ca-serv2__cta {
  display: inline-block;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  color: var(--ca-azul-vivo);
  text-decoration: none;
  white-space: pre;
}
.ca-serv2__cta::after {
  content: "";
  display: block;
  inline-size: 186px;
  block-size: 2px;
  margin-top: 8px;
  background: var(--ca-verde);
  transition: inline-size 220ms ease;
}
.ca-serv2__cta:hover::after { inline-size: 232px; }

@media (max-width: 1100px) {
  .ca-serv2__foto { position: static; inline-size: 100%; block-size: 320px; border-radius: 0 !important; }
  .ca-serv2--curva { padding-top: 0; }
  .ca-serv2--curva .ca-serv2__curva { display: none; }
  .ca-serv2--curva .ca-serv2__foto { block-size: 320px; }
  .ca-serv2--izq .ca-serv2__col { margin-inline-start: 0; }
  .ca-serv2 .ca-wrap { padding: 48px 24px 56px; }
}
@media (max-width: 640px) {
  .ca-serv2__foto { block-size: 240px; }
  .ca-serv2 h2 { font-size: 22px; line-height: 28px; }
}

/* -------------------------------------------------------------------------
 * 27 · Banda de impacto acumulado (188:211) y cotizacion con curva (188:228)
 * ---------------------------------------------------------------------- */
.ca-impacto2 {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--ca-azul);
  color: var(--ca-blanco);
}
.ca-impacto2 .ca-wrap { position: relative; z-index: 1; padding: 84px 24px 34px; }
.ca-impacto2__marca {
  position: absolute;
  top: 190px;
  left: 786px;
  inline-size: 1180px;
  block-size: 468px;
  background: url("../img/recurso-curva.svg") no-repeat left top / contain;
  opacity: .12;
  pointer-events: none;
}
.ca-rotulo1--cian { color: var(--ca-cian); }
.ca-impacto2 h2 {
  max-inline-size: 760px;
  margin: 42px 0 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 52px;
  color: var(--ca-blanco);
}
.ca-impacto2__malla {
  display: grid;
  grid-template-columns: repeat(4, 280px);
  justify-content: start;
  column-gap: 52px;
  margin-top: 64px;
}
.ca-impacto2__it { border-top: 1px solid var(--ca-azul-vivo); }
.ca-impacto2__it b {
  display: block;
  margin-top: 23px;
  font-size: 44px;
  font-weight: 300;
  line-height: 51px;
  color: var(--ca-verde);
}
.ca-impacto2__it span {
  display: block;
  max-inline-size: 270px;
  margin-top: 5px;
  font-size: 14px;
  line-height: 22px;
  color: var(--ca-azul-tenue);
}
.ca-impacto2__fuente {
  margin: 30px 0 0;
  font-family: var(--ca-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 1.2px;
  color: var(--ca-azul-tenue);
}

/* 200 de curva + los 92 que ya tiene la variante corta. */
/* Sin el filete: la curva sale de una banda azul y la linea gris del borde
   superior de .ca-cot partia el azul en dos. */
.ca-cot--curva { position: relative; padding-block-start: 292px; border-block-start: 0; }
.ca-cot__curva {
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 200px;
  background: var(--ca-azul);
  border-end-start-radius: 200px;
}

@media (max-width: 1100px) {
  .ca-impacto2__malla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .ca-impacto2__marca { display: none; }
}
@media (max-width: 640px) {
  .ca-impacto2 .ca-wrap { padding: 64px 24px 40px; }
  .ca-impacto2 h2 { margin-top: 28px; font-size: 30px; line-height: 38px; }
  .ca-impacto2__malla { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .ca-impacto2__it b { font-size: 34px; line-height: 40px; }
  /* 190:183 · la variante con curva mide 1227 = 1107 + los 120 de la curva */
  .ca-cot--curva { padding-block-start: 179px; min-block-size: 1227px; }
  .ca-cot__curva { block-size: 120px; border-end-start-radius: 120px; }
}

/* La variante de La planta (191:114) cambia el ritmo y remata con texto
   corrido en vez de un credito. */
.ca-impacto2--efic .ca-wrap { padding-block-end: 68px; }
.ca-impacto2--efic .ca-impacto2__malla { margin-top: 58px; }
.ca-impacto2--efic .ca-impacto2__it b { margin-top: 21px; }
.ca-impacto2__nota {
  max-inline-size: 900px;
  margin: 80px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--ca-azul-tenue);
}
@media (max-width: 640px) {
  .ca-impacto2--efic .ca-wrap { padding-block-end: 44px; }
  .ca-impacto2__nota { margin-top: 36px; font-size: 15px; line-height: 25px; }
}


/* -------------------------------------------------------------------------
 * 28 · Movil de las piezas nuevas */
/* Ojo: los marcos moviles del archivo (190:82 y hermanos) tienen el icono, el
   numero y el titulo colocados ENCIMA de la foto, con texto azul sobre foto y
   sin velo. Es un error del archivo, no una decision: aqui se respeta el
   lenguaje (foto 220 con esquina de 80, icono 56, mismas escalas) pero el
   contenido va debajo de la foto, que es lo unico legible. */
@media (max-width: 640px) {

  /* Indice de servicios (207:32): filas de miniatura 96x72 + texto */
  .ca-idx .ca-wrap { padding: 58px 24px 56px; }
  .ca-idx h2 { margin-top: 52px; font-size: 30px; line-height: 38px; }
  .ca-idx__lead { max-inline-size: none; margin: 16px 0 0; font-size: 15px; line-height: 24px; }
  .ca-idx__familia { margin-top: 32px; padding-top: 16px; }
  .ca-idx__familia:first-of-type { margin-top: 40px; }
  .ca-idx__malla { grid-template-columns: 1fr; gap: 20px; margin-top: 18px; }
  .ca-idx__tar {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  .ca-idx__tar img { grid-row: 1 / span 2; block-size: 72px; border-radius: 8px; }
  .ca-idx__tar .ca-idx__num { grid-column: 2; margin: 0; }
  .ca-idx__tar h3 { grid-column: 2; margin: 6px 0 0; font-size: 18px; line-height: 23px; }
  .ca-idx__tar p, .ca-idx__tar .ca-idx__ver { display: none; }

  /* Bloque de servicio (190:82 y hermanos).
   *
   * En el archivo el icono (y=56), el numero (134) y el titulo (156) caen
   * ENCIMA de la foto, que ocupa de 0 a 220, en azul y sin velo: en el propio
   * Figma no se lee. No es una decision de diseno, es que el grupo de texto
   * del marco movil se ha desplazado hacia arriba (confirmado con Mario el
   * 16-ago). Asi que se corrige: foto de 220 con la esquina de 80 y TODO el
   * contenido por debajo. Cada bloque sale en ~710 en vez de los 520 que
   * marca el marco, y esa diferencia es del archivo, no de la maqueta.
   */
  .ca-serv2 { background: var(--ca-gris-100); }
  .ca-serv2__foto {
    position: static;
    inline-size: 100%;
    block-size: 220px;
    border-radius: 0 0 0 80px !important;
  }
  .ca-serv2--curva { padding-top: 120px; }
  .ca-serv2--curva .ca-serv2__curva { display: block; block-size: 120px; border-end-start-radius: 120px; }
  .ca-serv2--curva .ca-serv2__foto { block-size: 220px; }
  .ca-serv2 .ca-wrap { padding: 40px 24px 44px; }
  .ca-serv2__col { max-inline-size: none; }
  .ca-serv2--izq .ca-serv2__col { margin-inline-start: 0; }
  .ca-serv2__num { margin-top: 22px; letter-spacing: 1.4px; }
  .ca-serv2 h2 { margin-top: 8px; font-size: 21px; line-height: 26px; }
  .ca-serv2__lead { margin-top: 14px; font-size: 16px; line-height: 26px; }
  .ca-serv2__lista { margin-top: 18px; }
  .ca-serv2__lista li { padding-left: 20px; font-size: 14px; line-height: 22px; }
  .ca-serv2__lista li + li { margin-top: 10px; }
  .ca-serv2__lista li::before { top: 8px; inline-size: 5px; block-size: 5px; border-radius: 3px; }
  .ca-serv2__cta { margin-top: 24px; }

  /* Banda de impacto (190:166): una cifra por fila, entre reglas */
  .ca-impacto2 .ca-wrap { padding: 58px 24px 32px; }
  .ca-impacto2 h2 { max-inline-size: none; margin-top: 32px; font-size: 30px; line-height: 38px; }
  .ca-impacto2__malla { grid-template-columns: 1fr; column-gap: 0; row-gap: 28px; margin-top: 40px; }
  .ca-impacto2__it b { margin-top: 17px; font-size: 32px; line-height: 38px; }
  .ca-impacto2__it span { max-inline-size: none; margin-top: 6px; font-size: 14px; line-height: 20px; }
  .ca-impacto2__fuente { margin-top: 36px; line-height: 14px; }
  .ca-impacto2--efic .ca-wrap { padding-block-end: 32px; }
  .ca-impacto2--efic .ca-impacto2__malla { margin-top: 40px; }
  .ca-impacto2--efic .ca-impacto2__it b { margin-top: 17px; }
}


/* La línea legal se alinea por flexbox; sin text-align el auditor la compara
   por la izquierda y marca un falso desvío. */
.ca-pie__base > :last-child { text-align: right; }


/* =========================================================================
 * 30 · Movimiento
 *
 * Un solo sistema para toda la web, con cuatro decisiones detras:
 *
 * 1 · Curvas propias. Las de serie (ease, ease-out) son flojas y dejan las
 *     transiciones con aire de plantilla. Todo sale con --ca-e-sale, que
 *     arranca rapido y frena largo, que es lo que da sensacion de respuesta.
 * 2 · Nada de ease-in en interfaz: retrasa el primer fotograma, justo el que
 *     el visitante esta mirando, y hace que todo parezca lento.
 * 3 · Los titulares se revelan POR LINEAS, con una mascara. Es el gesto que
 *     carga el peso editorial; el resto de la pagina acompana sin competir.
 * 4 · Solo se animan transform, opacity y clip-path. Nada que obligue al
 *     navegador a recalcular la maqueta.
 * ====================================================================== */

/* --- Curvas y tiempos -------------------------------------------------- */
:root {
  --ca-e-sale:  cubic-bezier(.23, 1, .32, 1);
  --ca-e-mueve: cubic-bezier(.77, 0, .175, 1);
  --ca-e-panel: cubic-bezier(.32, .72, 0, 1);

  --ca-t-toque: 140ms;
  --ca-t-ui:    200ms;
  --ca-t-entra: 560ms;
  --ca-t-linea: 700ms;
}

/* --- Aparicion al entrar en pantalla ----------------------------------- */
/* El retardo lo pone el JS en --ca-d segun el orden entre hermanos, no segun
   el orden en que el observador los recoge: asi la cascada es la misma en
   cada visita en vez de depender de la velocidad del scroll. */
.ca-js .ca-ap {
  --ca-d: 0ms;
  opacity: 1;
  transition:
    opacity   var(--ca-t-entra) var(--ca-e-sale) var(--ca-d),
    transform var(--ca-t-entra) var(--ca-e-sale) var(--ca-d);
}
/* 10 y no 16: cuando el bloque lleva titular, rotulo o foto, el recorrido
   lo ponen ellos y esto solo acompana. */
.ca-js .ca-ap:not(.is-visible) { opacity: 0; transform: translateY(10px); }
.ca-js .ca-ap.is-visible { transform: none; }

/* Fotos: entran con la curva del isotipo, no con un barrido de arriba
   abajo. La esquina inferior izquierda arranca comida por un radio enorme
   —el mismo gesto que .ca-banda-curva, que .ca-cot__curva y que el
   contenedor de icono de marca, 18/18/18/36— y se va cerrando hasta dejar
   la foto a escuadra mientras suelta el acercamiento.
   Va en clip-path y no en border-radius porque clip-path se compone en la
   GPU; con border-radius habria que repintar la foto en cada fotograma.
   El radio en % escala solo con el tamano de cada foto, que van de 220 a
   880 de alto. */
.ca-js .ca-revelo {
  transition:
    clip-path 940ms var(--ca-e-panel) var(--ca-d),
    transform 1180ms var(--ca-e-panel) var(--ca-d);
}
.ca-js .ca-revelo:not(.is-visible) {
  clip-path: inset(0 0 22% 0 round 0 0 0 46%);
  transform: scale(1.035);
}
.ca-js .ca-revelo.is-visible { clip-path: inset(0 0 0 0 round 0 0 0 0); transform: none; }

/* --- Titulares por lineas ---------------------------------------------- */
/* .ca-ln es la mascara y .ca-ln__i la linea que sube por debajo.
   overflow:clip con overflow-clip-margin recorta 0.18em mas abajo del borde
   SIN tocar la maqueta, que es justo lo que hace falta: con line-height
   apretado (el h1 movil va 37/42) una mascara al ras corta las colas de la
   g, la j y la y. El apano de relleno + margen negativo tambien recortaba
   bien, pero el margen negativo se escapa por colapso y dejaba cada titular
   7px mas alto de lo que mide en el archivo.
   overflow:hidden queda de respaldo para navegadores sin overflow:clip. */
.ca-ln {
  display: block;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: .18em;
}
.ca-ln__i { display: block; }
.ca-js .ca-tit-anim .ca-ln__i {
  transition: transform var(--ca-t-linea) var(--ca-e-panel);
  transition-delay: var(--ca-ld, 0ms);
}
/* Va en :not(.is-visible) a proposito. Con la misma especificidad que la
   regla de llegada, la de salida ganaria por orden y las lineas se quedarian
   escondidas para siempre. Ya paso una vez con .ca-ap. */
.ca-js .ca-tit-anim:not(.is-visible) .ca-ln__i { transform: translateY(118%); }

/* El titular partido en lineas ya trae su propio recorrido: si ademas lo sube
   el bloque que lo contiene, se ven dos movimientos peleando. El bloque solo
   funde. */
.ca-js .ca-ap.ca-ap--solo-fundido:not(.is-visible) { transform: none; }

/* --- Pulsar ------------------------------------------------------------ */
/* Sin esto un boton no acusa el clic y la interfaz parece que no escucha.
   0.975 es suficiente: se nota y no se ve. */
.ca-btn { transition: background var(--ca-tr), box-shadow var(--ca-tr), transform var(--ca-t-toque) var(--ca-e-sale); }
.ca-btn:active { transform: scale(.975); }
.ca-burger { transition: transform var(--ca-t-toque) var(--ca-e-sale); }
.ca-burger:active { transform: scale(.94); }

/* --- La punta de flecha de los enlaces --------------------------------- */
/* El JS aisla el «->» final en un .ca-punta para poder moverlo solo a el.
   Antes esto se hacia ensanchando el letter-spacing del enlace entero, que
   recompone el texto en cada hover. */
.ca-punta { display: inline-block; transition: transform var(--ca-t-ui) var(--ca-e-sale); }

/* --- Nada de :hover pegado en pantallas tactiles ----------------------- */
/* En un movil el toque deja el :hover activado y la tarjeta se queda
   levantada hasta que tocas otra cosa. Parece un fallo, y lo es. */
@media (hover: none), (pointer: coarse) {
  .ca-tarjeta-post:hover,
  .ca-ciclo__it:hover,
  .ca-tarjeta:hover { transform: none; box-shadow: none; }
  .ca-tarjeta-post:hover .ca-tarjeta-post__img img,
  .ca-ciclo__it:hover img,
  .ca-destacado__foto:hover img { transform: none; }
  .ca-enlace:hover .ca-punta { transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .ca-enlace:hover .ca-punta,
  .ca-hero__enlace:hover .ca-punta,
  .ca-lp-hero__ancla:hover .ca-punta { transform: translateX(4px); }
}

/* --- Menos movimiento -------------------------------------------------- */
/* Menos no es ninguno: se conservan los fundidos, que ayudan a entender que
   algo ha aparecido, y se quita todo lo que se desplaza. */
@media (prefers-reduced-motion: reduce) {
  .ca-js .ca-ap:not(.is-visible) { transform: none; }
  .ca-js .ca-revelo:not(.is-visible) { clip-path: none; transform: none; opacity: 0; }
  .ca-js .ca-tit-anim:not(.is-visible) .ca-ln__i { transform: none; }
  .ca-hero__slide.is-activo .ca-hero__foto { animation: none; }
  .ca-btn:active { transform: none; }
}


/* =========================================================================
 * 31 · Volver arriba
 *
 * Mismo cuerpo que el contenedor de icono de marca —56x56 con el radio
 * 14/14/14/28, que es la version pequena del 72 con 18/18/18/36— y el mismo
 * azul. Asi el boton se lee como una pieza mas del sistema y no como un
 * artefacto pegado encima, que es en lo que suelen quedarse estos botones.
 * ====================================================================== */
.ca-arriba {
  position: fixed;
  inset-block-end: 28px;
  inset-inline-end: 28px;
  z-index: 60;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 14px 14px 14px 28px;
  background: var(--ca-azul);
  color: var(--ca-blanco);
  box-shadow: 0 10px 30px rgba(0, 35, 79, .22);
  text-decoration: none;
  /* Escondido hasta que hay algo que rebobinar. Con visibility ademas sale
     del orden de tabulacion: un boton invisible pero enfocable no es un
     detalle, es un fallo de accesibilidad. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.92);
  transition:
    opacity var(--ca-t-ui) var(--ca-e-sale),
    transform var(--ca-t-ui) var(--ca-e-sale),
    background var(--ca-tr),
    visibility 0s linear var(--ca-t-ui);
}
.ca-arriba.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--ca-t-ui) var(--ca-e-sale),
    transform var(--ca-t-ui) var(--ca-e-sale),
    background var(--ca-tr);
}
.ca-arriba svg { display: block; transition: transform var(--ca-t-ui) var(--ca-e-sale); }
@media (hover: hover) and (pointer: fine) {
  .ca-arriba:hover { background: var(--ca-azul-vivo); }
  .ca-arriba:hover svg { transform: translateY(-3px); }
}
.ca-arriba:active { transform: scale(.94); }
.ca-arriba:focus-visible { outline: 2px solid var(--ca-verde); outline-offset: 3px; }

/* Con el menu movil desplegado el boton estorba por encima. */
body:has(.ca-nav.is-abierto) .ca-arriba { opacity: 0; visibility: hidden; }

@media (max-width: 640px) {
  .ca-arriba {
    inset-block-end: max(16px, env(safe-area-inset-bottom));
    inset-inline-end: 16px;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 12px 12px 12px 24px;
  }
  .ca-arriba svg { inline-size: 24px; block-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ca-arriba,
  .ca-arriba.is-visible,
  .ca-arriba:active { transform: none; }
  .ca-arriba:hover svg { transform: none; }
}


/* ---------------------------------------------------------------
   Capa AEO · respuesta directa y preguntas por página
   --------------------------------------------------------------- */
.ca-corto__caja { max-width: 860px; margin: 0 auto; }
.ca-tarjeta .ca-corto__txt { margin: 70px 0 0; font-size: 19px; line-height: 1.62; }
.ca-faqp__h2 { margin: 70px 0 26px; }
.ca-faqp details > summary::-webkit-details-marker { display: none; }
@media (max-width: 640px) {
	.ca-tarjeta .ca-corto__txt { margin-top: 52px; font-size: 17px; line-height: 1.58; }
}

/* Enlazado interno al final del artículo */
.ca-hub__caja { max-width: 860px; margin: 0 auto; }
.ca-tarjeta .ca-hub__txt { margin: 70px 0 0; font-size: 17px; line-height: 1.62; }
.ca-hub__lista { margin: 18px 0 0; padding: 0; list-style: none; }
.ca-hub__lista li { margin: 0 0 8px; }
.ca-hub__lista a { color: var(--ca-azul); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(0,57,128,.25); }
.ca-hub__lista a:hover { border-bottom-color: currentColor; }

@media (max-width: 640px) {
	.ca-faqp__h2 { margin-top: 52px; }
	.ca-tarjeta .ca-hub__txt { margin-top: 52px; }
}

/* Figuras, pies de foto y gráficos dentro de los artículos */
.ca-prosa figure { margin-inline: 0; }
.ca-prosa figure img { margin-block: 0; }
.ca-prosa figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ca-gris-700); }
.ca-grafico { background: var(--ca-blanco); border: 1px solid var(--ca-gris-300); padding: 26px 22px 20px; }
.ca-grafico svg { margin: 0 auto; }
@media (max-width: 640px) {
	.ca-grafico { padding: 18px 14px 14px; }
	.ca-prosa figcaption { font-size: 13.5px; }
}