/* ===========================================================
   Crema — la web comercial. La comparten /crema.html (español)
   y /crema-en.html (inglés): el diseño se cambia una sola vez.
   Claro, limpio, con aire y movimiento lento. La profundidad
   viene de luz difusa. El punto se usa UNA vez, en grande.
   =========================================================== */
:root {
  /* El logotipo es un dibujo: se enlaza el archivo, nunca se compone con
     tipografía. Como máscara hereda el color del texto. */
  --logo-crema: url("/crema.svg");
  --tinta:  #231F20;
  --crema:  #E8E4DF;
  --papel:  #FBFAF8;
  --gris-humo: #6A6164;

  --ground: #E8E4DF;
  --raised: #FBFAF8;
  --raised2:#F2EFEB;

  --bone:  #231F20;
  --stone: #55504F;
  /* Antes #837C7C: daba 3.2 de contraste sobre el crema y no pasaba para
     texto. El humo da 4.73 y sigue leyéndose como terciario. */
  --ash:   #6A6164;

  --line:  rgba(35, 31, 32, 0.16);
  --line2: rgba(35, 31, 32, 0.08);

  --wide: 70rem;
  --read: 42rem;

  --cucharada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1226.40 1000'%3E%3Cpath d='M1218.29,203.94C1191.40,346.83 1085.93,461.69 1031.98,594.70C972.85,717.98 985.97,930.70 850.05,979.30C775.52,1004.09 700.03,998.25 617.73,999.71L433.53,999.71C310.40,996.15 162.01,1016.40 75.49,950.14C-20.09,865.57 4.86,692.39 0.00,564.56C0.16,515.15 -0.16,466.06 1.13,421.35C5.02,203.61 76.47,144.97 299.55,141.73C480.84,138.65 652.08,146.75 828.01,125.85C921.82,117.75 1007.36,75.63 1085.12,27.03C1216.99,-55.92 1241.78,66.23 1218.77,201.67L1218.29,203.94Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--bone);
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-size: 1.0625rem; font-weight: 400; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* padding-inline, no el atajo: el atajo pisaba el padding-block de section. */
.wrap { max-width: var(--wide); margin: 0 auto; padding-inline: clamp(1.5rem, 5vw, 3.5rem); }
.read { max-width: var(--read); }
section { position: relative; padding-block: clamp(6rem, 13vw, 11rem); overflow: hidden; scroll-margin-top: 5rem; }
section > * { position: relative; z-index: 2; }
section.corta { padding-block: clamp(3rem, 6vw, 5rem); }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }

/* ===== Tipografía: grande, liviana, con la clave en negrita ===== */
h1, h2, h3 { margin: 0; font-weight: 400; }
h1 strong, h2 strong, h3 strong { font-weight: 600; }
h1 {
  font-size: clamp(3rem, 8.4vw, 6.2rem);
  line-height: 1.0; letter-spacing: -0.032em; text-wrap: balance;
}
h2 {
  font-size: clamp(2.6rem, 6.6vw, 4.6rem);
  line-height: 1.06; letter-spacing: -0.028em;
  margin-bottom: 1.4rem; text-wrap: balance;
}
h3 {
  font-size: 1.1875rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.015em; margin-bottom: 0.5rem;
}

/* Rótulo de categoría: es el que ordena la página. */
.rotulo {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(0.75rem, 1.35vw, 0.9375rem);
  font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  line-height: 1.4;
  color: var(--tinta); display: block;
  padding-bottom: 1.6rem; margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.rotulo-tenue { color: var(--ash); }

.lede {
  font-size: clamp(1.125rem, 2.1vw, 1.4375rem);
  line-height: 1.5; color: var(--stone); max-width: 40rem; font-weight: 400;
}
.lede strong { color: var(--bone); font-weight: 600; }
.nota { font-size: 0.9375rem; color: var(--ash); line-height: 1.6; }

/* ===== Luz difusa: el fondo respira, no es un plano ===== */
.aura { position: absolute; inset: -30% -20%; z-index: 0; pointer-events: none; }
.aura i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(78px); opacity: 0.85;
}
.aura .a1 { width: 54vw; height: 54vw; left: 54%; top: 4%;  background: radial-gradient(circle, rgba(35,31,32,0.075), transparent 68%); }
.aura .a2 { width: 34vw; height: 34vw; left: 2%;  top: 48%; background: radial-gradient(circle, rgba(35,31,32,0.06), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .aura i { animation: deriva 26s ease-in-out infinite alternate; }
  .aura .a2 { animation-duration: 34s; animation-delay: -8s; }
  @keyframes deriva {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(-6%, 8%, 0) scale(1.18); }
  }
}

/* ===== El punto, una sola vez y en grande ===== */
.gota {
  position: absolute; z-index: 1; pointer-events: none;
  left: -46vw; top: -16%; width: 134vw;
  aspect-ratio: 1226.40 / 1000;
  -webkit-mask: var(--cucharada) center / contain no-repeat;
          mask: var(--cucharada) center / contain no-repeat;
  background:
    linear-gradient(128deg, rgba(35,31,32,0.26) 0%, rgba(35,31,32,0.15) 38%,
                    rgba(35,31,32,0.055) 78%, rgba(35,31,32,0.015) 100%);
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .gota { animation: flotar 18s ease-in-out infinite alternate; }
  @keyframes flotar {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(-2.2%, 1.6%, 0) rotate(-1.1deg); }
  }
}
@media (max-width: 48rem) { .gota { opacity: 0.24; left: -70vw; top: 10%; width: 190vw; } }

/* ===== Movimiento de entrada ===== */
@media (prefers-reduced-motion: no-preference) {
  .sube { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.3,1); }
  .sube.visible { opacity: 1; transform: none; }
}

/* ===== Barra ===== */
.logo { display: block; height: 1.4rem; width: auto; }
.logo-pie { height: 1.85rem; opacity: .9; }
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  background: rgba(232, 228, 223, 0.72); backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent; transition: background .3s, border-color .3s;
}
.top.pegada { background: rgba(232, 228, 223, 0.94); border-bottom-color: var(--line2); }
.top .inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: 1.15rem; }
.derecha { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); }
.topnav { display: flex; gap: clamp(0.9rem, 2vw, 1.9rem); }
.topnav a {
  font-size: 0.875rem; color: var(--stone); text-decoration: none;
  white-space: nowrap; transition: color .2s;
}
.topnav a:hover { color: var(--bone); }
@media (max-width: 48rem) { .topnav { display: none; } }
.marca-barra { display: flex; align-items: center; text-decoration: none; }

/* El cambio de idioma se ve también en el teléfono, donde el menú se esconde. */
.idioma {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.75rem;
  letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none;
  color: var(--bone); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.35rem 0.75rem; transition: border-color .2s;
}
.idioma:hover { border-color: var(--stone); }

/* ===== Nombre de cada producto =====
   Solo el nombre, en la letra de los rótulos. El logo de Crema ya está en la
   barra: repetido al lado de cada producto competía con el nombre.
   .logo-crema queda para quien lo use suelto. */
.lockup-agente {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.5em; white-space: nowrap;
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  margin-bottom: clamp(1.4rem, 2.8vw, 2rem);
  color: var(--gris-humo);
}
.lockup-agente em {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-style: normal; font-size: 0.72em; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--stone);
}
.logo-crema {
  display: block; height: 1.05em; width: 7.068em;
  background: currentColor;
  -webkit-mask: var(--logo-crema) center / contain no-repeat;
          mask: var(--logo-crema) center / contain no-repeat;
}

/* ===== Botones ===== */
.acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: clamp(2.25rem, 4vw, 3rem); }
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.95rem 1.6rem; border-radius: 999px;
  font-size: 0.9688rem; font-weight: 500; text-decoration: none;
  transition: transform .2s, background .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-solido { background: var(--tinta); color: var(--crema); border: 1px solid var(--tinta); }
.btn-solido:hover { background: #000; border-color: #000; }
.btn-linea { border: 1px solid var(--line); color: var(--bone); }
.btn-linea:hover { border-color: var(--stone); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* ===== Hero ===== */
.hero {
  min-height: 92svh; display: flex; align-items: center;
  padding-top: 8rem; padding-bottom: clamp(5rem, 10vw, 9rem);
}

/* ===== En pocas palabras =====
   La definición de Crema en cuatro datos. Es lo primero que lee un buscador
   de empresas o un asistente de IA para decir qué hacemos y para quién. */
.hechos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0;
  background: var(--line2); border: 1px solid var(--line2); border-radius: 10px; overflow: hidden;
}
@media (max-width: 60rem) { .hechos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .hechos { grid-template-columns: 1fr; } }
.hechos div { background: var(--papel); padding: clamp(1.4rem, 2.6vw, 1.9rem); }
.hechos dt {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.6875rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); margin-bottom: 0.6rem;
}
.hechos dd { margin: 0; font-size: 0.9688rem; line-height: 1.5; color: var(--bone); }

/* ===== Rejillas ===== */
.malla { display: grid; gap: 1px; background: var(--line2); border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); }
.malla-2 { grid-template-columns: repeat(2, 1fr); }
.malla-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 52rem) { .malla-2, .malla-3 { grid-template-columns: 1fr; } }
.celda { background: var(--papel); padding: clamp(1.6rem, 3vw, 2.25rem); }
.celda p { color: var(--stone); font-size: 0.9688rem; margin: 0; line-height: 1.55; }

/* ===== Las cuatro áreas ===== */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line2); border: 1px solid var(--line2); border-radius: 10px;
  overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 64rem) { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .areas { grid-template-columns: 1fr; } }
.area { background: var(--papel); padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; }
.area h3 {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.75rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta);
  margin-bottom: 1rem; font-weight: 500;
}
.area .que { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--bone); margin-bottom: 0.75rem; }
.area p { color: var(--stone); font-size: 0.9375rem; line-height: 1.55; }
.area ul { list-style: none; margin: auto 0 0; padding: 1.25rem 0 0; }
.area li {
  font-size: 0.875rem; color: var(--stone); line-height: 1.4;
  padding: 0.55rem 0; border-top: 1px solid var(--line2);
}

/* ===== Señales: frases que un dueño reconoce como propias ===== */
.senales {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  max-width: 48rem; display: flex; flex-direction: column;
}
.senales li {
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  line-height: 1.45; color: var(--stone);
  padding: 0.85rem 0; border-bottom: 1px solid var(--line2);
}
.senales li:first-child { border-top: 1px solid var(--line2); }

/* ===== Franja de producto ===== */
.franja { position: relative; overflow: hidden; background: var(--raised2); }
.franja::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(72% 55% at 86% 6%, rgba(35,31,32,0.05), transparent 64%);
}
.franja > * { position: relative; z-index: 2; }

.producto-linea {
  font-size: clamp(1.125rem, 2.1vw, 1.4375rem); line-height: 1.5;
  color: var(--stone); max-width: 42rem; font-weight: 400;
}
.producto-linea + .producto-linea { margin-top: 1rem; }
.producto-linea strong { color: var(--bone); font-weight: 600; }
.pie-metricas { font-size: 0.8125rem; color: var(--ash); margin-top: 0.9rem; }

/* Los productos comparten franja: cada uno arranca con su lockup y los separa una línea. */
.producto { display: block; margin-top: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 5rem; }
.producto + .producto {
  margin-top: clamp(5rem, 10vw, 8rem); padding-top: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--line);
}

/* ===== El panel de verdad =====
   Capturas del panel corriendo, no maquetas: salen de Casa Delfina, el
   restaurante de demostración. Cada teléfono es su propio contenedor, así que
   el marco, la barra de estado y la isla escalan con el ancho de la columna. */
.pantallas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.fono { container-type: inline-size; margin: 0; }
.fono .marco {
  border-radius: 12cqi; padding: 1.6cqi;
  background: linear-gradient(150deg, #4A4446 0%, #141213 40%, #141213 100%);
  box-shadow: 0 1.5cqi 4cqi rgba(35,31,32,.22), 0 0.3cqi 1cqi rgba(35,31,32,.14);
}
.fono .pantalla {
  position: relative; overflow: hidden; border-radius: 10.6cqi;
  background: #FBFBF8; display: flex; flex-direction: column;
}
.fono .ios {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 3cqi 7cqi 1cqi;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 3.9cqi; font-weight: 600; color: var(--tinta);
}
.fono .ios span { display: flex; align-items: flex-end; gap: 0.6cqi; }
.fono .ios i { display: block; width: 0.9cqi; background: var(--tinta); border-radius: 0.5cqi; }
.fono .ios i:nth-child(1) { height: 1.5cqi; }
.fono .ios i:nth-child(2) { height: 2.1cqi; }
.fono .ios i:nth-child(3) { height: 2.7cqi; }
.fono .ios i:nth-child(4) { height: 3.3cqi; }
.fono .isla {
  position: absolute; top: 1.7cqi; left: 50%; transform: translateX(-50%);
  width: 28cqi; height: 7.8cqi; border-radius: 3.9cqi; background: #141213;
}
.fono img { display: block; width: 100%; height: auto; }
.fono figcaption {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.6875rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ash);
  margin-top: 1.1rem;
}
.fono figcaption b { display: block; font-family: inherit; font-weight: 500; color: var(--stone); }
@media (max-width: 52rem) {
  /* Tres teléfonos apilados son una página entera de scroll: en angosto van en
     un riel que se arrastra. */
  .pantallas {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(50% - 50vw); padding-inline: max(1.25rem, calc(50vw - 50%));
    padding-bottom: 0.5rem;
  }
  .fono { scroll-snap-align: center; }
}

/* ===== Pasos ===== */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 52rem) { .pasos { grid-template-columns: 1fr; } }
.paso { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.paso .n {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.75rem;
  color: var(--ash); letter-spacing: 0.15em; display: block; margin-bottom: 0.9rem;
}
.paso p { color: var(--stone); font-size: 0.9688rem; margin: 0; }

/* ===== Llamada ===== */
.caja-llamada {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(160deg, var(--papel), rgba(255,255,255,0.55));
  padding: clamp(2rem, 4vw, 3rem);
}
.desde { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 0.6rem; }
.desde strong { font-weight: 600; }

/* ===== Preguntas ===== */
.preguntas { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line2); }
details { border-bottom: 1px solid var(--line2); }
summary {
  list-style: none; cursor: pointer; padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative; font-size: 1.0625rem; color: var(--bone);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  color: var(--tinta); font-size: 1.25rem; font-weight: 400;
}
details[open] summary::after { content: "−"; }
details p { color: var(--stone); font-size: 0.9688rem; margin: 0 0 1.35rem; max-width: 44rem; }

/* ===== Pie ===== */
footer {
  border-top: 1px solid var(--line2); padding-block: 3rem 4rem;
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
}
footer span, footer a { font-size: 0.875rem; color: var(--ash); }
footer a { text-decoration: none; }
footer a:hover { color: var(--bone); }