/* Portada de Celerati.
   Clara, de galería. La decisión no es de gusto: casi todas las tarjetas que
   se enseñan son oscuras —LARIA verde, Edersy y Crash Help navy, Amaury negro,
   Infinite Windows oscura— y sobre fondo negro se fundían con la página. Sobre
   claro cada una recorta su propio borde y manda ella, que es el objetivo.
   Papel blanco, obra colgada: el fondo no compite. */

.ce{
  --bg:#f7f5ef; --bg-2:#fffefa; --ink:#101817; --muted:#65706d;
  --line:#d9ded8; --acc:#0b8b76; --acc-dark:#07695a; --acc-soft:#dff3ed; --acc-ink:#fffefa;
  --night:#10201d;
  --sombra:0 28px 80px rgba(20,40,35,.13);
  min-height:100dvh; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;
}
.ce h1,.ce h2{font-weight:590; letter-spacing:-.06em}

.ce-top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  height:66px; padding:0 clamp(18px,5vw,56px); border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.ce-brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none}
.ce-word{font-size:19px; font-weight:720; letter-spacing:-.045em}
.ce-dot{color:var(--acc)}
.ce-mark{width:29px; height:29px; display:block}
.ce-ico{display:inline-grid; place-items:center; line-height:0}
.ce-ico svg{width:1em; height:1em}
.ce-lang{
  background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:7px 15px; font:inherit; font-size:12.5px; cursor:pointer;
}
.ce-lang{font-weight:600; letter-spacing:.04em}
.ce-lang:hover{color:var(--acc-dark); border-color:var(--acc)}

.ce-hero{position:relative; background:var(--night); color:#f7f5ef; --ink:#f7f5ef; --muted:#b9c4c0;
  padding:clamp(48px,9vw,96px) clamp(18px,5vw,56px) clamp(40px,7vw,72px); overflow:hidden}
.ce-hero-img{display:block; width:100%; height:auto; border-radius:16px; box-shadow:0 28px 80px rgba(0,0,0,.45)}
.ce-hero .ce-kicker{color:#8fd3c4}
.ce-hero .ce-textlink{color:#f7f5ef}
.ce-hero .ce-textlink:hover{color:#8fd3c4}
.ce-hero .ce-chips li{background:rgba(11,139,118,.18); color:#8fd3c4}
.ce-hero .ce-proof-strip img{border-color:var(--night)}
.ce-hero-txt{min-width:0}
/* En móvil no hay segunda columna: el arte se oculta y el texto ocupa todo. */
.ce-hero-art{display:block; margin-top:34px}
.ce-hero-inner{display:block}
.ce-video{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:18px; background:#10201d;
  box-shadow:var(--sombra)}
.ce-hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:26px}
.ce-hero-actions .ce-cta{margin-top:0}
.ce-textlink{display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-size:13px;
  font-weight:720; text-decoration:none}
.ce-textlink:hover{color:var(--acc-dark)}
.ce-textlink .ce-ico,.ce-cta .ce-ico{font-size:16px}
.ce-chips{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.ce-chips li{font-size:12px; font-weight:600; color:var(--acc-dark); background:var(--acc-soft);
  border-radius:999px; padding:6px 12px}
.ce-proof{margin:30px 0 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.ce-proof span{font-size:12.5px; color:var(--muted); font-weight:500}
.ce-proof-strip{display:flex}
.ce-proof-strip img{width:68px; height:43px; object-fit:cover; border-radius:6px; border:2px solid var(--bg);
  box-shadow:0 2px 8px rgba(16,24,23,.18); margin-left:-12px}
.ce-proof-strip img:first-child{margin-left:0}

/* Desktop: dos columnas. El texto deja de estar solo en una franja ancha y
   vacía; a la derecha, dos tarjetas reales superpuestas prueban el producto
   antes de hacer scroll. */
@media (min-width:900px){
  .ce-hero-inner{max-width:1280px; margin:0 auto; display:grid;
    grid-template-columns:minmax(380px,.78fr) minmax(600px,1.22fr); align-items:center; gap:clamp(40px,5vw,72px)}
  .ce-hero-art{display:block; margin-top:0}
}
/* Teléfono del hero: marco de dispositivo con la tarjeta viva dentro. Puro CSS,
   sin assets. El halo y las ondas NFC dan el "wow" sin recargar. */
.ce-phone{
  position:relative; width:clamp(230px,24vw,290px); aspect-ratio:9/19.2;
  padding:11px; border-radius:44px; background:#0b0e12;
  box-shadow:0 2px 3px rgba(255,255,255,.15) inset, 0 40px 80px -24px rgba(20,18,15,.5), 0 0 0 1px rgba(20,18,15,.2);
}
/* Halo neutro detrás del teléfono: da profundidad sin color. */
.ce-phone::before{content:""; position:absolute; inset:-14% -30% -10% -20%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle,rgba(20,18,15,.10),transparent 62%)}
.ce-phone-notch{position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:96px; height:26px; border-radius:14px; background:#0b0e12; z-index:2}
.ce-phone>img{width:100%; height:100%; object-fit:cover; border-radius:34px; display:block; background:#0a1322}
.ce-kicker{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 14px; color:var(--acc-dark);
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
}
.ce-kicker::before{content:""; width:22px; height:2px; background:var(--acc)}
.ce-hero h1{margin:0; font-size:clamp(44px,7vw,68px); line-height:1.04; max-width:14ch}
.ce-hero p{
  margin:20px 0 0; max-width:48ch; color:var(--muted);
  font-size:clamp(16px,2.4vw,19px); line-height:1.6;
}
.ce-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:45px; margin-top:30px; padding:0 22px; border-radius:999px;
  background:var(--acc-dark); color:var(--acc-ink); text-decoration:none;
  border:1px solid var(--acc-dark); font-family:inherit; font-weight:700; font-size:14.5px; cursor:pointer;
  transition:transform .15s, background .2s, box-shadow .2s;
}
.ce-cta:hover{transform:translateY(-2px); background:var(--acc-dark); box-shadow:0 10px 28px rgba(11,139,118,.2)}
.ce-cta:active{transform:scale(.985)}
.ce-cta-lg{margin-top:26px; min-height:52px; padding:0 30px; font-size:15.5px}

/* Cierre de venta: banda centrada, solo el llamado. */
.ce-final{padding:clamp(56px,10vw,110px) clamp(18px,5vw,56px); border-top:1px solid var(--line);
  text-align:center; background:var(--bg-2)}
.ce-final h2{margin:0 auto; max-width:16ch; font-size:clamp(28px,5vw,44px); line-height:1.1}
.ce-final p{margin:14px auto 0; max-width:44ch; color:var(--muted); font-size:16.5px; line-height:1.6}

/* Popup de cotización. Fondo velado + panel claro centrado, en la línea del
   sitio. Aparece solo al pulsar; nunca al entrar. */
/* El popup se pinta FUERA de .ce, así que no hereda sus variables: se las
   redeclara aquí o el panel sale transparente. */
.ce-modal{
  --bg:#f7f5ef; --bg-2:#fffefa; --ink:#101817; --muted:#65706d;
  --line:#d9ded8; --acc:#0b8b76; --acc-dark:#07695a; --acc-soft:#dff3ed; --acc-ink:#fffefa;
  --night:#10201d;
  font-family:Inter,system-ui,-apple-system,sans-serif; color:var(--ink);
  position:fixed; inset:0; z-index:100;
  /* Flex, NO grid: una columna de grid `auto` crece hasta el contenido máximo
     del panel, y ahí `min(100%,468px)` se calculaba contra esa columna inflada
     —el panel salía más ancho que la pantalla y con scroll horizontal—. En flex
     el contenedor se queda del ancho de la ventana y el panel encoge para caber.
     El overlay es quien hace scroll (no el panel): así el botón de cerrar no se
     mueve al desplazarse el contenido. */
  display:flex; justify-content:center; align-items:flex-start;
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(14px,5vh,48px) 16px; background:rgba(20,18,15,.5); backdrop-filter:blur(3px);
  animation:ce-fade .18s ease}
/* box-sizing en TODO el modal: sin esto el padding se sumaba a los 468px del
   panel y a la anchura de los campos, y la tarjeta desbordaba a lo ancho —el
   scroll horizontal que se veía—. */
.ce-modal *{box-sizing:border-box}
.ce-modal h2{font-weight:590; letter-spacing:-.05em}
@keyframes ce-fade{from{opacity:0} to{opacity:1}}
.ce-modal-panel{position:relative; width:min(100%,468px); overflow:hidden;
  padding:clamp(26px,5vw,40px); border-radius:22px; background:var(--bg);
  box-shadow:0 40px 90px -30px rgba(20,18,15,.5); animation:ce-pop .2s cubic-bezier(.2,.7,.3,1)}
@keyframes ce-pop{from{transform:translateY(12px) scale(.98); opacity:0} to{transform:none; opacity:1}}
.ce-modal-x{position:absolute; top:14px; right:14px; width:38px; height:38px; border:0; border-radius:50%;
  background:var(--bg-2); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; z-index:3}
.ce-modal-x{display:grid; place-items:center; color:var(--ink)}
.ce-modal-x svg{width:18px; height:18px}
.ce-modal-x:hover{background:var(--line)}
/* Antetítulo: en la línea del sitio (como .ce-kicker), no una píldora verde.
   Letra pequeña, muy espaciada, en tono apagado. */
.ce-modal-eyebrow{margin:0 0 16px; color:var(--muted);
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase}
.ce-modal-h{margin:0; font-size:clamp(26px,5.5vw,34px); line-height:1.05}
.ce-modal-sub{margin:14px 0 0; color:var(--muted); font-size:15px; line-height:1.6}

.ce-sec{padding:clamp(44px,8vw,86px) clamp(18px,5vw,56px); border-top:1px solid var(--line)}
.ce-sec h2{margin:0; font-size:clamp(26px,4.6vw,38px); line-height:1.15}
.ce-sub{margin:12px 0 0; max-width:56ch; color:var(--muted); font-size:15.5px; line-height:1.6}
.ce-dark{background:var(--night); color:#f7f5ef; --ink:#f7f5ef; --muted:#b9c4c0; --line:rgba(247,245,239,.16); --bg-2:#16302b}

/* Mosaico de tarjetas vivas: se desplaza en móvil, rejilla en pantalla ancha. */
.ce-grid{
  margin-top:30px; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.ce-card{text-decoration:none; color:inherit; display:block; position:relative}

/* Distintivo del plan alto. Va ENCIMA de la tarjeta, que es oscura en todos
   los casos, así que el champán sobre cristal oscuro se lee sin tocar el papel
   claro de la página. Oro apagado, no dorado de bisutería: en esta portada el
   único color fuerte tiene que seguir siendo el de las tarjetas. */
.ce-premium{
  position:absolute; top:13px; right:13px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px 6px 9px; border-radius:999px;
  background:rgba(12,10,7,.62);
  backdrop-filter:saturate(160%) blur(9px);
  -webkit-backdrop-filter:saturate(160%) blur(9px);
  border:1px solid rgba(212,180,117,.5);
  color:#e4cb96; font-size:9px; font-weight:600; letter-spacing:.2em;
  line-height:1; padding-inline-end:calc(11px + .2em);
  pointer-events:none;
}
.ce-premium svg{width:12px; height:12px; color:#d4b475; fill:#d4b475; flex:0 0 12px}
.ce-card>img{
  width:100%; height:auto; display:block; border-radius:18px;
  border:1px solid var(--line); background:#fff; box-shadow:var(--sombra);
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s;
}
.ce-card:hover>img{
  transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(20,18,15,.06), 0 22px 50px rgba(20,18,15,.14);
}
.ce-card>span{display:flex; flex-direction:column; gap:2px; margin-top:11px}
.ce-card b{font-size:14.5px; font-weight:600}
.ce-card i{font-style:normal; font-size:12.5px; color:var(--muted)}

.ce-how-grid{display:grid; gap:34px; align-items:center}
@media (min-width:900px){ .ce-how-grid{grid-template-columns:minmax(320px,.8fr) minmax(520px,1.2fr); gap:clamp(40px,5vw,72px)} }
.ce-steps{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:18px}
.ce-steps li{display:grid; grid-template-columns:34px 1fr; column-gap:14px; align-items:start}
.ce-steps li span{grid-row:1/3; width:34px; height:34px; border-radius:50%; background:var(--acc-soft); color:var(--acc-dark);
  font-size:13px; font-weight:700; display:grid; place-items:center}
.ce-steps li b{font-size:16px; font-weight:700}
.ce-steps li p{margin:3px 0 0; font-size:14px; line-height:1.5; color:var(--muted)}
.ce-hint{margin:16px 0 0; color:var(--muted); font-size:12.5px; letter-spacing:.02em}
.ce-fisicas{margin-top:18px; display:grid; gap:26px 18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ce-pieza{display:flex; flex-direction:column; gap:11px; position:relative}
/* Pieza vertical entre piezas horizontales. Sin esto marca la altura de toda
   la fila y deja un socavón blanco al lado; ocupando dos filas, ese hueco lo
   llenan las tarjetas siguientes y además se ve más grande, que es lo que
   corresponde a la que abre la lista. */
.ce-alta{grid-row:span 2}
@media (max-width:560px){ .ce-alta{grid-row:auto} }

/* La pieza se voltea de verdad: es lo que hace en la mano, y verla por los dos
   lados es la mitad de lo que se compra. Un botón, no un div, para que también
   funcione con teclado. */
.ce-flip{
  all:unset; display:block; cursor:pointer; position:relative;
  aspect-ratio:1082/708; perspective:1200px; border-radius:12px;
}
.ce-flip:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
/* Pieza de una sola cara: se ve igual, pero ni el cursor ni el foco prometen
   un volteo que no existe. */
.ce-fija{cursor:default}
.ce-cara{
  position:absolute; inset:0; border-radius:13px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sombra); backface-visibility:hidden;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.ce-cara>img{width:100%; height:100%; object-fit:cover; display:block}
.ce-frente{transform:rotateY(0deg)}
.ce-reverso{transform:rotateY(180deg)}
.ce-flip[data-vuelta="si"] .ce-frente{transform:rotateY(-180deg)}
.ce-flip[data-vuelta="si"] .ce-reverso{transform:rotateY(0deg)}

/* Envuelve en vez de estrujar: con el distintivo puesto, nombre y enlace no
   caben en una línea de columna estrecha y el nombre se partía por la mitad. */
.ce-pie{display:flex; align-items:baseline; justify-content:space-between; gap:4px 12px; flex-wrap:wrap}
.ce-pie-nombre{display:inline-flex; align-items:center; gap:9px; min-width:0}
/* Variante de pie: fuera de la tarjeta no hay cristal oscuro que la sostenga,
   así que se apoya en el papel con un filete de oro y nada más. */
.ce-premium-pie{
  position:static; padding:4px 9px 4px 8px;
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-color:rgba(201,165,90,.55); color:#D2B06A; font-size:8.5px;
}
.ce-premium-pie svg{fill:#D2B06A; width:10px; height:10px; flex:0 0 10px}
.ce-pie b{font-size:14px; font-weight:600}
.ce-pie a{color:#3CC7A9; font-weight:700; text-decoration:none; font-size:12.5px; white-space:nowrap}
.ce-pie a:hover{text-decoration:underline}

/* Sin animación para quien la haya desactivado en su sistema: el volteo sigue
   funcionando, pero sin el giro. */
@media (prefers-reduced-motion:reduce){
  .ce-cara{transition:none}
}

.ce-lista{
  margin:30px 0 0; padding:0; list-style:none;
  display:grid; gap:22px 40px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.ce-lista>li{display:flex; flex-direction:column; gap:5px}
.ce-lista b{font-size:15px; font-weight:600}
.ce-lista span{color:var(--muted); font-size:14px; line-height:1.55}


/* Formulario premium: campos con línea inferior, sin cajas —más editorial y en
   la línea del sitio—, etiquetas en versalitas espaciadas, y mucho aire. */
.ce-form{margin-top:26px; display:grid; gap:22px 20px; grid-template-columns:1fr 1fr}
.ce-form label{display:flex; flex-direction:column; gap:8px; min-width:0;
  font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.ce-form .ce-full{grid-column:1/-1}
.ce-form input[type=text],.ce-form input[type=tel],.ce-form input[type=email],
.ce-form input:not([type]){
  width:100%; min-width:0; -webkit-appearance:none; appearance:none;
  background:transparent; border:0; border-radius:0;
  /* El subrayado se pinta con box-shadow, NO con border-bottom: así el foco
     puede engrosarlo sin mover el campo (cambiar el ancho de borde daba un
     saltito) y sin que ningún estilo por defecto del navegador lo tape. */
  box-shadow:0 1px 0 0 var(--line);
  padding:9px 2px; color:var(--ink); caret-color:var(--ink);
  font-family:inherit; font-size:17px; letter-spacing:0; text-transform:none;
  min-height:42px; transition:box-shadow .2s;
}
.ce-form input::placeholder{color:transparent}
.ce-form input:focus,.ce-form input:focus-visible{outline:0; box-shadow:0 2px 0 0 var(--ink)}
/* Autofill: Chrome pinta un fondo azul/amarillo que rompía el campo. Se fuerza
   el fondo del panel y el color de texto de la marca; la transición larga es el
   truco conocido para que el navegador no repinte su amarillo encima. */
.ce-form input:-webkit-autofill,
.ce-form input:-webkit-autofill:hover,
.ce-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 1px 0 0 var(--line), 0 0 0 100px var(--bg) inset;
  transition:background-color 9999s ease-out 0s;
  caret-color:var(--ink);
}
.ce-form input:-webkit-autofill:focus{
  -webkit-box-shadow:0 2px 0 0 var(--ink), 0 0 0 100px var(--bg) inset;
}
.ce-check{grid-column:1/-1; margin-top:2px; flex-direction:row !important; align-items:center; gap:12px !important;
  letter-spacing:0; text-transform:none; color:var(--muted)}
.ce-check input{width:18px; height:18px; accent-color:var(--ink); flex:0 0 18px}
.ce-check span{font-size:13px; text-transform:none; letter-spacing:normal}
/* Botón premium: la píldora negra del sitio, ancho completo. El glifo de
   WhatsApp va fino y hereda el color de la cremita —promesa honesta del canal,
   sin gritar—. */
.ce-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; margin-top:6px; padding:0 28px;
  border:0; border-radius:999px; background:var(--acc); color:var(--acc-ink);
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.01em; cursor:pointer;
  transition:transform .15s, background .2s, box-shadow .2s;
}
.ce-wa:hover{transform:translateY(-2px); background:var(--acc-dark); box-shadow:0 10px 28px rgba(11,139,118,.2)}
.ce-wa:active{transform:scale(.99)}
.ce-wa:disabled{opacity:.55; cursor:progress}
.ce-wa svg{width:18px; height:18px; fill:currentColor; flex:0 0 18px; opacity:.85}
.ce-err{grid-column:1/-1; margin:0; color:#B3261E; font-size:14px; letter-spacing:0; text-transform:none}
/* Trampa para robots: fuera de pantalla, nunca a display:none —hay bots que lo
   detectan— y sin acceso por tabulador para quien navegue con teclado. */
.ce-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
@media(max-width:480px){ .ce-form{grid-template-columns:1fr; gap:20px} }

.ce-ok{margin-top:6px; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.ce-ok-actions{margin-top:18px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.ce-ok-actions .ce-wa{margin:0; min-height:48px; text-decoration:none}
.ce-ok-actions .ce-textlink{background:none; border:0; cursor:pointer; font-family:inherit}
.ce-ok-mark{display:grid; place-items:center; width:52px; height:52px; margin-bottom:12px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg-2)}
.ce-ok-mark svg{width:24px; height:24px; color:var(--acc); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ce-ok b{font-weight:590; letter-spacing:-.04em; font-size:24px}
.ce-ok p{margin:6px 0 0; max-width:38ch; color:var(--muted); font-size:15px; line-height:1.55}

.ce-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(18px,5vw,56px); border-top:1px solid var(--line);
  color:var(--muted); font-size:12px; letter-spacing:.16em;
}

@media (max-width:520px){
  .ce-grid{grid-template-columns:repeat(2,1fr); gap:12px}
}

/* Vídeo de cómo se usa. Vertical, porque se graba con un teléfono y se ve en
   un teléfono; forzarlo a horizontal deja dos franjas negras. */
.ce-video{background:var(--bg-2)}
.ce-player{
  margin-top:26px; max-width:340px; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sombra); background:#000;
}
.ce-player>video{width:100%; height:auto; display:block; aspect-ratio:9/16; object-fit:cover}

/* Páginas legales: una columna estrecha y aire entre bloques. Un texto legal
   se lee de arriba abajo o no se lee; nada de rejillas ni columnas. */
.ce-legal{max-width:720px; padding:clamp(40px,7vw,72px) clamp(18px,5vw,56px) 20px}
.ce-legal h1{font-weight:590; letter-spacing:-.05em;
  font-size:clamp(32px,6vw,46px); line-height:1.1; margin:0; letter-spacing:-.01em}
.ce-fecha{margin:10px 0 0; color:var(--muted); font-size:13px}
.ce-lead{margin:22px 0 0; font-size:16.5px; line-height:1.65; color:var(--ink)}
.ce-legal section{margin-top:38px}
.ce-legal h2{font-weight:590; letter-spacing:-.04em;
  font-size:clamp(21px,3.4vw,26px); line-height:1.2; margin:0 0 12px}
.ce-legal p{margin:0 0 12px; font-size:15.5px; line-height:1.7; color:var(--soft,#4A4640)}
.ce-legal ul{margin:0; padding-left:20px}
.ce-legal li{margin:0 0 9px; font-size:15.5px; line-height:1.65; color:var(--soft,#4A4640)}
.ce-foot a{color:inherit; text-decoration:none}
.ce-foot a:hover{color:var(--ink)}
.ce-foot-links{display:flex; align-items:center; gap:16px; flex-wrap:wrap}

/* Punto que late en la etiqueta del hero.
   Lo unico que valia la pena tomar de la pagina de un competidor: dice «esto
   esta vivo» sin gastar una palabra, y aqui es cierto — hay 20 tarjetas de
   clientes funcionando ahora mismo, dos secciones mas abajo.
   Se apaga con prefers-reduced-motion: a quien le molesta el movimiento, un
   punto parpadeando en lo primero que ve le arruina la pagina entera. */
.ce-kicker{display:inline-flex; align-items:center; gap:8px}
.ce-vivo{position:relative; width:6px; height:6px; border-radius:50%;
  background:var(--acc,#0b8b76); flex:none}
.ce-vivo:before{content:""; position:absolute; inset:0; border-radius:50%;
  background:inherit; animation:ce-latido 2.4s ease-out infinite}
@keyframes ce-latido{0%{transform:scale(1); opacity:.55} 70%,100%{transform:scale(3.2); opacity:0}}
@media (prefers-reduced-motion:reduce){ .ce-vivo:before{animation:none} }