/* AIM CREATE · web pública.
   La portada es un lienzo: tinta luminosa que fluye y que el visitante pinta. Después, el trabajo
   real (los editores tal como son), las estéticas con una obra de cada ánimo, y lo práctico.
   Una sola familia, Bricolage Grotesque (variable, con tamaño óptico): grande y con carácter en los
   titulares, tranquila en el texto. El acento de la página es el de la estética elegida. */

@font-face {
  font-family: "Bricolage";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fuentes/bricolage-latin.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fuentes/bricolage-latin-ext.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --noche: #06070a;
  --noche-2: #101219;
  --papel: #f3f4f6;
  --blanco: #ffffff;
  --tinta: #13151c;
  --gris: #565b6b;
  --gris-noche: #a7abb8;
  --linea: #dcdfe5;

  /* el acento lo pone la estética (abajo); estos son los de la clásica */
  --acento: #378ef0;
  --sobre-acento: #ffffff;
  /* el relleno de los botones principales: el acento, oscurecido si el texto blanco no llega a 4,5:1 */
  --acento-boton: #1173e1;
  --acento-texto: #1d6fd0;

  --imagen: #0e4f55;
  --video: #5c262e;
  --foto: #8a5a12;
  --vector: #2f3e8c;
  --diseno: #4a5a2c;
  --motion: #6b2e73;
  --audio: #1f5e3b;
  --planos: #2b4a66;
  --genera: #94661a;

  --margen: 20px;
  --ancho: 1240px;
  --radio: 18px;
}
html[data-estetica="futuristic"] { --acento-boton: #00d6f0; --acento: #00d6f0; --sobre-acento: #06070a; --acento-texto: #00788a; }
html[data-estetica="calm"] { --acento-boton: #2173dd; --acento: #5896e6; --sobre-acento: #ffffff; --acento-texto: #2f6ac0; }
html[data-estetica="focus"] { --acento-boton: #34ba7c; --acento: #34ba7c; --sobre-acento: #06070a; --acento-texto: #1d7a4f; }
html[data-estetica="energy"] { --acento-boton: #ff7a3e; --acento: #ff7a3e; --sobre-acento: #06070a; --acento-texto: #b8461a; }
html[data-estetica="inspiration"] { --acento-boton: #8149ff; --acento: #a076ff; --sobre-acento: #ffffff; --acento-texto: #6b44d0; }
html[data-estetica="joy"] { --acento-boton: #f0ba1e; --acento: #f0ba1e; --sobre-acento: #06070a; --acento-texto: #8a6400; }
html[data-estetica="serenity"] { --acento-boton: #e876a4; --acento: #e876a4; --sobre-acento: #06070a; --acento-texto: #b03c6c; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
p { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
main { display: block; }

/* ---- Barra ---- */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 14px var(--margen);
  background: color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.barra.solida { border-bottom-color: var(--linea); }
.barra .marca { font-weight: 760; font-size: 17px; letter-spacing: 0.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.barra .marca::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#378ef0, #00d6f0, #34ba7c, #f0ba1e, #ff7a3e, #e876a4, #a076ff, #378ef0); }
.barra nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; font-size: 16px; }
.barra nav a { text-decoration: none; padding: 6px 0; }
.barra nav a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.barra .acceso { font-weight: 650; }
.idiomas { position: relative; }
.idiomas summary { list-style: none; cursor: pointer; padding: 6px 0; opacity: 0.75; }
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 3px 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.idiomas[open] summary { opacity: 1; }
.idiomas > div { position: absolute; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; min-width: 160px; padding: 6px; border-radius: 14px; background: var(--blanco); color: var(--tinta); box-shadow: 0 18px 40px -12px rgba(6, 7, 10, 0.35), 0 0 0 1px rgba(6, 7, 10, 0.06); }
.idiomas > div a { padding: 8px 12px; border-radius: 10px; }
.idiomas > div a:hover { background: var(--papel); text-decoration: none; }
/* Chino: sin el interletraje negativo de los titulares latinos */
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3 { letter-spacing: 0; line-height: 1.18; }
html[lang="zh-Hans"] .lienzo h1 { max-width: 8.6em; font-size: clamp(2.6rem, 7vw, 7rem); }
html[lang="zh-Hans"] .esteticas h2, html[lang="zh-Hans"] .privado h2 { max-width: 10em; }
/* Sobre el lienzo de la portada, la barra es transparente y clara */
.inicio .barra { position: fixed; left: 0; right: 0; background: transparent; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.inicio .barra.solida { background: color-mix(in srgb, var(--papel) 88%, transparent); color: var(--tinta); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }

/* ---- Botones ---- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 24px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 17px;
  font-weight: 640;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton.principal { background: var(--acento-boton); border-color: var(--acento-boton); color: var(--sobre-acento); }
.boton.principal:hover { filter: brightness(1.06); }
.boton.secundario:hover { background: var(--blanco); }
.boton.claro { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.boton.claro:hover { background: #fff; color: var(--noche); border-color: #fff; }
.boton:disabled { opacity: 0.6; cursor: wait; transform: none; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--gris); text-decoration: underline; cursor: pointer; }

/* ---- Lienzo (portada) ---- */
.lienzo {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px var(--margen) 56px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(60% 50% at 18% 70%, rgba(55, 142, 240, 0.35), transparent 70%),
    radial-gradient(45% 45% at 80% 30%, rgba(160, 118, 255, 0.3), transparent 70%),
    radial-gradient(40% 40% at 65% 85%, rgba(0, 214, 240, 0.22), transparent 70%),
    var(--noche);
  touch-action: pan-y;
}
.lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1200ms ease; }
.lienzo.vivo canvas { opacity: 1; }
.lienzo-texto { position: relative; max-width: var(--ancho); width: 100%; margin: 0 auto; pointer-events: none; }
.lienzo-texto a { pointer-events: auto; }
.lienzo h1 {
  max-width: 13ch;
  font-size: clamp(3rem, 8.6vw, 8.6rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.lienzo .sub { max-width: 46ch; margin: 28px 0 32px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.lienzo .gratis { margin: 18px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.pista {
  position: absolute;
  right: var(--margen);
  bottom: 24px;
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* ---- Apps ---- */
.apps { max-width: var(--ancho); margin: 0 auto; padding: 96px var(--margen) 40px; }
.cabeza { max-width: 760px; margin-bottom: 56px; }
.cabeza h2, .esteticas h2, .privado h2, .europa h2, .precios-resumen h2, .preguntas h2 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); letter-spacing: -0.035em; }
.cabeza p { margin: 18px 0 0; max-width: 56ch; font-size: 20px; color: var(--gris); }

.app { display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 72px; }
.pantalla {
  display: block;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--noche);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -30px rgba(19, 21, 28, 0.55), 0 0 0 1px rgba(19, 21, 28, 0.08);
}
.pantalla img { display: block; width: 100%; height: auto; }
.ficha-app { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ficha-app .signo { width: 56px; height: auto; color: var(--c); }
.app.imagen { --c: var(--imagen); }
.app.video { --c: var(--video); }
.ficha-app h3 { margin-top: 6px; font-size: clamp(2.6rem, 5vw, 4.2rem); letter-spacing: -0.04em; color: var(--c); }
.ficha-app p { margin: 0 0 8px; max-width: 32ch; font-size: 20px; color: var(--gris); }
.ficha-app .boton { border-color: var(--c); color: var(--c); }
.ficha-app .boton:hover { background: var(--c); color: #fff; }

.rejilla-apps { display: grid; grid-template-columns: 1fr; gap: 40px 28px; padding-top: 12px; }
.tarjeta-app { display: flex; flex-direction: column; gap: 18px; }
.tarjeta-app.foto { --c: var(--foto); }
.tarjeta-app.vector { --c: var(--vector); }
.tarjeta-app.diseno { --c: var(--diseno); }
.tarjeta-app.motion { --c: var(--motion); }
.tarjeta-app.audio { --c: var(--audio); }
.tarjeta-app.planos { --c: var(--planos); }
.tarjeta-app.imagen { --c: var(--imagen); }
.tarjeta-app.video { --c: var(--video); }
.tarjeta-app.genera { --c: var(--genera); }
.obra-app { aspect-ratio: 3 / 2; border-radius: var(--radio); overflow: hidden; background: var(--c); }
.obra-app img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
.tarjeta-app:hover .obra-app img { transform: scale(1.035); }
.tarjeta-app .ficha-app { gap: 8px; }
.tarjeta-app h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 30px; letter-spacing: -0.03em; color: var(--c); }
.tarjeta-app h3 .signo { width: 34px; height: auto; flex: none; }
.tarjeta-app h3 .beta { padding: 3px 9px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 13px; font-weight: 650; letter-spacing: 0.02em; }
.tarjeta-app p { margin: 0 0 6px; font-size: 17px; max-width: 34ch; color: var(--gris); }
.tarjeta-app .boton { min-height: 44px; padding: 9px 20px; font-size: 16px; border-color: var(--c); color: var(--c); }
.tarjeta-app .boton:hover { background: var(--c); color: #fff; }
.avisame { width: 100%; }
.aviso-campos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.aviso-campos input { flex: 1 1 200px; min-height: 44px; padding: 8px 16px; border: 1.5px solid #b7bcc7; border-radius: 999px; background: var(--blanco); font: inherit; font-size: 16px; color: var(--tinta); }
.aviso-campos input:focus { outline: 3px solid var(--acento); outline-offset: 1px; }
.aviso-campos .boton.principal { background: var(--c); border-color: var(--c); color: #fff; }
.avisame .estado { margin: 8px 0 0; font-size: 15px; min-height: 0; }

/* ---- Estéticas: la obra de cada ánimo, a sangre ---- */
.esteticas {
  position: relative;
  display: grid;
  min-height: 92svh;
  color: #fff;
  background: var(--noche);
  overflow: hidden;
  isolation: isolate;
}
.escena { position: absolute; inset: 0; z-index: -1; }
.obra { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 900ms ease; }
.obra.activa { opacity: 1; }
.obra img, .obra video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.obra video { opacity: 0; transition: opacity 900ms ease; }
.obra video.listo { opacity: 1; }
.escena::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 7, 10, 0.92) 0%, rgba(6, 7, 10, 0.7) 38%, rgba(6, 7, 10, 0.12) 72%, rgba(6, 7, 10, 0) 100%),
    linear-gradient(0deg, rgba(6, 7, 10, 0.5), transparent 40%);
}
.est-texto { align-self: center; max-width: var(--ancho); width: 100%; margin: 0 auto; padding: 96px var(--margen); }
.esteticas h2 { max-width: 11ch; }
.est-texto > p { max-width: 44ch; margin: 20px 0 30px; font-size: 19px; color: rgba(255, 255, 255, 0.82); }
.lista-esteticas { display: grid; grid-template-columns: 1fr; gap: 6px; max-width: 520px; margin: 0; padding: 0; list-style: none; }
.estetica {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas: "gota nombre" "gota lema";
  align-items: center;
  column-gap: 14px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.estetica:hover { background: rgba(255, 255, 255, 0.07); }
.estetica[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); border-color: color-mix(in srgb, var(--tono) 70%, transparent); }
.estetica .gota { grid-area: gota; width: 18px; height: 18px; border-radius: 50%; background: var(--tono); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 22%, transparent), 0 0 18px color-mix(in srgb, var(--tono) 60%, transparent); }
.estetica .nombre { grid-area: nombre; font-size: 19px; font-weight: 650; line-height: 1.2; }
.estetica .lema { grid-area: lema; font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, 0.66); }
.esteticas .nota { margin: 22px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); }

/* ---- Privado ---- */
.privado { max-width: var(--ancho); margin: 0 auto; padding: 112px var(--margen) 24px; }
.privado h2 { max-width: 14ch; }
.privado .grande { max-width: 40ch; margin: 26px 0 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.45; color: var(--gris); }
.dos { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
.dos div { padding-top: 18px; border-top: 2px solid var(--tinta); }
.dos h3 { margin-bottom: 8px; font-size: 24px; letter-spacing: -0.02em; }
.dos p { margin: 0; color: var(--gris); }

/* ---- Europa: dónde está cada dato y quién está detrás ---- */
.europa { background: var(--noche); color: #fff; margin-top: 96px; }
.eu-dentro { max-width: var(--ancho); margin: 0 auto; padding: 104px var(--margen) 88px; }
.eu-sello { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 7px 16px 7px 7px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; font-size: 15px; font-weight: 600; color: #e9ecf5; }
.bandera-ue { display: block; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.europa h2 { margin-top: 30px; max-width: 12ch; }
.europa .grande { max-width: 44ch; margin: 26px 0 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.45; color: var(--gris-noche); }
.eu-capas { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 36px; }
.eu-capas li { padding-top: 20px; border-top: 2px solid rgba(255, 255, 255, 0.85); }
.eu-capas h3 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.eu-capas .eu-donde { margin: 6px 0 12px; font-size: 15px; font-weight: 640; color: #ffcc00; }
.eu-capas p { margin: 0; color: var(--gris-noche); }
.eu-quien { margin-top: 80px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: grid; gap: 10px; }
.eu-quien h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--gris-noche); }
.eu-quien p { margin: 0; max-width: 30ch; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.02em; }
.eu-quien a { justify-self: start; color: #fff; text-underline-offset: 4px; }
.eu-quien a:focus-visible, .eu-sello:focus-visible { outline: 2px solid #ffcc00; outline-offset: 3px; }
.privado:has(h2.sr) { padding-top: 72px; }

/* ---- Precios, preguntas y páginas estrechas ---- */
.precios-resumen, .preguntas, .precios-pagina, .cabeza-pagina { max-width: var(--ancho); margin: 0 auto; padding: 96px var(--margen) 8px; }
.precios-pagina { padding-top: 24px; }
.planes { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
.plan { display: flex; flex-direction: column; gap: 6px; padding: 28px 26px 28px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 22px; }
.plan.plus { position: relative; border: 0; color: #fff; background: var(--noche); overflow: hidden; }
.plan.plus::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 80%;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento) 55%, transparent), transparent 65%);
  pointer-events: none;
}
.plan.plus > * { position: relative; }
.plan h2, .plan h3 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.02em; }
.precio { margin: 6px 0 0; display: flex; align-items: baseline; gap: 6px; }
.precio .importe { font-size: clamp(48px, 6vw, 64px); font-weight: 720; letter-spacing: -0.045em; line-height: 1; }
.precio .por { font-size: 18px; color: var(--gris); }
.plan.plus .precio .por, .plan.plus .nota-precio { color: rgba(255, 255, 255, 0.7); }
.nota-precio { margin: 4px 0 8px; font-size: 15px; color: var(--gris); }
.incluye { margin: 10px 0 22px; padding: 0; list-style: none; flex: 1; }
.incluye li { position: relative; padding: 8px 0 8px 28px; border-top: 1px solid var(--linea); }
.plan.plus .incluye li { border-top-color: rgba(255, 255, 255, 0.14); }
.incluye li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 12px; height: 7px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.plan .boton { align-self: stretch; }
.plan.plus .boton.principal { border-color: var(--acento-boton); }
.periodos { display: inline-flex; align-self: flex-start; margin: 4px 0 6px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.periodo { padding: 7px 14px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.75); cursor: pointer; }
.periodo small { font-weight: 500; font-size: 13px; }
.periodo[aria-pressed="true"] { background: #fff; color: var(--noche); }
.planes[data-periodo="anual"] .solo-semestral, .planes[data-periodo="semestral"] .solo-anual { display: none; }

.espera { max-width: 560px; margin: 28px 0 0; padding: 24px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; }
.espera p { margin: 0 0 12px; }

.faq { margin-top: 30px; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { padding: 20px 40px 20px 0; font-size: 20px; font-weight: 620; letter-spacing: -0.01em; cursor: pointer; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border: solid var(--tinta); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 220ms ease; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq p { margin: 0 0 22px; max-width: 64ch; color: var(--gris); }

.cabeza-pagina h1, .estrecha h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -0.04em; }
.cabeza-pagina .sub, .estrecha .sub { max-width: 52ch; margin: 18px 0 0; font-size: 20px; color: var(--gris); }
.estrecha { max-width: 760px; margin: 0 auto; padding: 72px var(--margen) 72px; }
.campo { display: flex; flex-direction: column; gap: 8px; margin: 26px 0 16px; font-weight: 600; font-size: 15px; }
.campo input { min-height: 54px; padding: 12px 16px; border: 1.5px solid #b7bcc7; border-radius: 14px; background: var(--blanco); font: inherit; font-size: 18px; color: var(--tinta); }
.campo input:focus { outline: 3px solid var(--acento); outline-offset: 1px; border-color: var(--tinta); }
.estado { min-height: 1.5em; margin: 14px 0 0; font-weight: 600; }
.nota { margin-top: 26px; font-size: 15px; color: var(--gris); }
.aviso { margin: 18px 0 0; padding: 14px 16px; background: #fff4d9; color: #5a4410; border-radius: 14px; }
.aviso p { margin: 0; }
.aviso p + p { margin-top: 6px; }
/* la vuelta del pago: confirmación (verde, con una marca) y pago dejado a medias (neutro) */
.aviso.exito { position: relative; padding: 18px 20px 18px 62px; background: #e6f6ec; color: #134a2a; border: 1px solid #b9e2c8; }
.aviso.exito::before { content: ""; position: absolute; left: 20px; top: 18px; width: 28px; height: 28px; border-radius: 50%; background: #1f8a4c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.aviso.exito .aviso-h { font-weight: 700; font-size: 18px; }
.aviso.neutro { background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); }
.aviso.neutro a { color: var(--acento-texto); font-weight: 600; }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin: 28px 0; }
.ficha dt { color: var(--gris); }
.ficha dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.borrar-fila { margin-top: 36px; font-size: 15px; }
.legal h2 { margin: 36px 0 10px; font-size: 26px; }
.legal p, .legal li { color: #2a2e38; }
.legal .fecha { color: var(--gris); font-size: 15px; }

/* ---- Pie ---- */
.pie { margin-top: 112px; padding: 48px var(--margen) 40px; background: var(--noche); color: var(--gris-noche); font-size: 15px; }
.pie-dentro { max-width: var(--ancho); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; }
.pie p { margin: 0; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pie a:hover { color: #fff; }

/* ---- Pantallas grandes ---- */
@media (min-width: 760px) {
  /* La app que llega: ocupa la fila entera, al final, con su obra a lo ancho */
  .tarjeta-app.pronto { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 40px; }
  .tarjeta-app.pronto .obra-app { aspect-ratio: 16 / 9; }
  :root { --margen: 44px; }
  .barra { padding-top: 18px; padding-bottom: 18px; }
  .lienzo { padding-bottom: 72px; }
  .app { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: 56px; margin-bottom: 120px; }
  .app.video { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .app.video .pantalla { order: 2; }
  .rejilla-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-esteticas { grid-template-columns: 1fr 1fr; max-width: 640px; }
  .dos { grid-template-columns: 1fr 1fr; gap: 48px; max-width: 980px; }
  .eu-capas { grid-template-columns: repeat(2, 1fr); gap: 48px 56px; }
  .eu-quien { grid-template-columns: 220px 1fr auto; align-items: baseline; gap: 24px; }
  .planes { grid-template-columns: 1fr 1fr; max-width: 980px; }
  .pista { bottom: 30px; }
}
@media (min-width: 1100px) {
  .rejilla-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .pista { display: none; }
  .escena::after { background: linear-gradient(0deg, rgba(6, 7, 10, 0.94) 0%, rgba(6, 7, 10, 0.75) 55%, rgba(6, 7, 10, 0.3) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .boton:hover { transition: none; transform: none; }
  .obra, .obra video, .lienzo canvas { transition: none; }
}

/* ---- Créditos de AIM Genera (precios) ---- */
.creditos { max-width: var(--ancho); margin: 0 auto; padding: 72px var(--margen) 24px; }
.creditos h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.03em; }
.creditos .sub { max-width: 60ch; margin: 16px 0 28px; font-size: 19px; color: var(--gris); }
.paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 760px; }
.paquete { padding: 24px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); display: flex; flex-direction: column; gap: 6px; }
.paquete h3 { font-size: 22px; }
.paquete .precio { margin: 4px 0 0; }
.paquete .importe { font-size: 34px; font-weight: 720; letter-spacing: -0.02em; }
.paquete .nota-precio { margin: 0 0 12px; color: var(--gris); font-size: 15px; }
.paquete .boton { margin-top: auto; }
.tarifa-h { margin: 40px 0 10px; font-size: 20px; }
.tarifa { margin: 0; max-width: 760px; border-top: 1px solid var(--linea); }
.tarifa div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.tarifa dt { font-weight: 620; }
.tarifa dd { margin: 0; color: var(--gris); }
.creditos .nota { margin: 14px 0 0; color: var(--gris); font-size: 15px; }
@media (max-width: 560px) { .tarifa div { grid-template-columns: 1fr; } }

/* ---- Dock de apps en la portada: las nueve, a un clic ---- */
.dock {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 860px);
  margin: 4px 0 0;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  pointer-events: auto;
}
.dock-app { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 2px 6px; border-radius: 16px; text-decoration: none; color: #fff; transition: background-color 160ms ease, transform 160ms ease; }
.dock-app:hover, .dock-app:focus-visible { background: rgba(255, 255, 255, 0.1); transform: translateY(-3px); }
.dock-icono { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--c) 78%, #fff 6%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -10px color-mix(in srgb, var(--c) 80%, #000); }
.dock-signo { width: 34px; height: 34px; color: #fff; }
.dock-nombre { font-size: 14px; font-weight: 600; letter-spacing: 0; white-space: nowrap; color: rgba(255, 255, 255, 0.92); }
.dock-pill { position: absolute; top: -7px; right: -10px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: #fff; color: #111; letter-spacing: 0.01em; }
.dock-pill.beta { background: rgba(10, 10, 14, 0.82); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.dock-app.pronto .dock-icono { filter: saturate(0.6); opacity: 0.85; }
.dock-app.imagen { --c: var(--imagen); }
.dock-app.video { --c: var(--video); }
.dock-app.foto { --c: var(--foto); }
.dock-app.vector { --c: var(--vector); }
.dock-app.diseno { --c: var(--diseno); }
.dock-app.motion { --c: var(--motion); }
.dock-app.audio { --c: var(--audio); }
.dock-app.planos { --c: var(--planos); }
.dock-app.genera { --c: var(--genera); }
@media (max-width: 760px) {
  .dock { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px; }
  .dock-icono { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .dock-app:hover, .dock-app:focus-visible { transform: none; } }

/* Formatos: qué abre y qué guarda cada app (ficha de la portada y página de formatos) */
.formatos-app { display: grid; gap: 6px; margin: 0 0 4px; max-width: 40ch; font-size: 15px; line-height: 1.45; }
.formatos-app div { display: grid; gap: 1px; }
.formatos-app dt { font-size: 13px; font-weight: 700; color: var(--c, var(--tinta)); }
.formatos-app dd { margin: 0; color: var(--gris); }
.formatos-todos { margin: 0 0 12px; font-size: 15px; }
.formatos-todos a { color: var(--c, var(--acento-texto)); font-weight: 600; text-underline-offset: 3px; }
.ver-formatos { margin: 40px 0 0; font-size: 18px; }
.ver-formatos a { color: var(--acento-texto); font-weight: 650; text-underline-offset: 4px; }
.formatos-pagina { max-width: var(--ancho); margin: 0 auto; padding: 48px var(--margen) 96px; display: grid; gap: 56px; }
.formatos-de { scroll-margin-top: 90px; border-top: 1px solid var(--linea); padding-top: 32px; }
.formatos-de h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; color: var(--c, var(--tinta)); }
.formatos-de h2 .signo { width: 44px; height: auto; color: var(--c, var(--tinta)); }
.formatos-de h2 .beta { padding: 3px 9px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 13px; font-weight: 650; letter-spacing: 0.02em; }
.formatos-de .propio { margin: 0 0 18px; font-size: 17px; color: var(--gris); }
.formatos-de .propio span:first-child { font-weight: 650; color: var(--tinta); }
.formatos-de .dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; }
.formatos-de h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--gris); }
.lista-formatos { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 17px; }
.lista-formatos .formato { font-weight: 600; color: var(--tinta); }
.lista-formatos .ext, .formatos-de .ext { font-size: 14px; color: var(--gris); word-break: break-word; }
.formatos-de .boton { border-color: var(--c, var(--tinta)); color: var(--c, var(--tinta)); }
.formatos-de#imagen { --c: var(--imagen); }
.formatos-de#video { --c: var(--video); }
.formatos-de#foto { --c: var(--foto); }
.formatos-de#vector { --c: var(--vector); }
.formatos-de#diseno { --c: var(--diseno); }
.formatos-de#motion { --c: var(--motion); }
.formatos-de#audio { --c: var(--audio); }
.formatos-de#planos { --c: var(--planos); }
@media (min-width: 1100px) { .eu-capas { grid-template-columns: repeat(4, 1fr); gap: 40px; } }

/* ---- Portada: enlace a la página de cada app ---- */
.acciones-app { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.descubre { font-size: 16px; font-weight: 650; color: var(--c, var(--acento-texto)); text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--c, var(--acento-texto)) 40%, transparent); padding-bottom: 2px; transition: border-color 180ms ease; }
.descubre:hover { border-bottom-color: currentColor; }
.tarjeta-app .descubre { margin-top: 4px; }
.obra-signo { display: grid; place-items: center; width: 100%; height: 100%; background:
  radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--c) 55%, #fff 10%), transparent 60%),
  repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 88%, #000) 0 18px, var(--c) 18px 36px); color: #f3efe6; }
.obra-signo .signo-grande { width: 34%; height: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.3)); }

/* ---- La página de cada app: su pigmento manda ---- */
.producto { --c: #2b2f3a; --luz: #9aa3b8; }
.producto-pagina .barra { background: color-mix(in srgb, var(--papel) 90%, transparent); }
.producto-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 72px var(--margen) 72px;
  color: #fff;
  background:
    radial-gradient(70% 80% at 100% 0%, color-mix(in srgb, var(--luz) 38%, transparent), transparent 62%),
    radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--c) 70%, transparent), transparent 70%),
    color-mix(in srgb, var(--c) 34%, var(--noche));
  overflow: hidden;
}
.ph-texto, .ph-obra { max-width: var(--ancho); min-width: 0; }
.ph-texto { align-self: center; }
.ph-marca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 30px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ph-nombre .aim { opacity: 0.66; font-weight: 640; }
.ph-marca .beta { padding: 3px 9px; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 999px; font-size: 13px; font-weight: 650; letter-spacing: 0.02em; }
.tesela-app { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--c); color: #f3efe6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.tesela-app .signo { width: 70%; height: auto; }
.tesela-app.grande { width: 58px; height: 58px; border-radius: 15px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 14px 30px -12px rgba(0, 0, 0, 0.5); }
.producto-hero h1 { max-width: 15ch; font-size: clamp(2.7rem, 6.4vw, 6rem); line-height: 0.96; letter-spacing: -0.045em; }
.producto-hero .sub { max-width: 52ch; margin: 26px 0 30px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: rgba(255, 255, 255, 0.84); }
.ph-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.producto .boton.principal { background: #fff; border-color: #fff; color: color-mix(in srgb, var(--c) 82%, #000); }
.producto .boton.principal:hover { filter: none; background: color-mix(in srgb, var(--luz) 30%, #fff); }
.producto .avisame { width: auto; max-width: 460px; }
.producto .aviso-campos .boton.principal { background: #fff; border-color: #fff; color: var(--c); }
.producto .avisame .estado { color: rgba(255, 255, 255, 0.85); }
.enlace-formatos { color: #fff; font-weight: 600; font-size: 16px; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.ph-gratis { margin: 16px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.68); }
.ph-obra { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.12); background: var(--c); }
.ph-obra img { display: block; width: 100%; height: 100%; object-fit: cover; }

.producto-para { max-width: var(--ancho); margin: 0 auto; padding: 72px var(--margen) 0; }
.producto-para p { max-width: 34ch; margin: 0; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.22; letter-spacing: -0.025em; font-weight: 600; color: color-mix(in srgb, var(--c) 78%, var(--tinta)); }

.producto-funciones { max-width: var(--ancho); margin: 0 auto; padding: 88px var(--margen) 24px; }
.producto-funciones h2, .producto-formatos h2, .producto-suite h2, .producto-mas h2, .producto-final h2 { max-width: 18ch; font-size: clamp(2.1rem, 4.6vw, 3.8rem); letter-spacing: -0.035em; }
.pfn-lista { display: grid; grid-template-columns: 1fr; gap: 44px 56px; margin-top: 52px; }
.pfn-lista article { padding-left: 22px; border-left: 3px solid var(--c); }
.pfn-lista h3 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 27px); letter-spacing: -0.02em; line-height: 1.15; }
.pfn-lista p { margin: 0; max-width: 46ch; color: var(--gris); }

.producto-formatos { max-width: var(--ancho); margin: 72px auto 0; padding: 56px var(--margen); border-radius: 0; background: color-mix(in srgb, var(--c) 7%, var(--blanco)); }
.pf-cabeza .propio { margin: 14px 0 0; color: var(--gris); }
.pf-cabeza .propio strong { color: var(--tinta); }
.pf-columnas { display: grid; grid-template-columns: 1fr; gap: 34px; margin-top: 36px; }
.pf-columnas h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: color-mix(in srgb, var(--c) 80%, var(--tinta)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 7px 13px; border-radius: 999px; background: var(--blanco); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--linea)); font-size: 15px; font-weight: 600; line-height: 1.3; }
.chips small { font-weight: 500; color: var(--gris); }
.pf-todos { margin: 28px 0 0; }
.pf-todos a { font-weight: 650; color: color-mix(in srgb, var(--c) 80%, var(--tinta)); text-underline-offset: 4px; }

.producto-suite { max-width: var(--ancho); margin: 0 auto; padding: 96px var(--margen) 8px; }
.producto-suite ul { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.producto-suite a { display: flex; align-items: flex-start; gap: 18px; padding: 22px; border-radius: 18px; text-decoration: none; background: var(--blanco); border: 1px solid var(--linea); transition: border-color 180ms ease, transform 180ms ease; }
.producto-suite a:hover { border-color: var(--tinta); transform: translateY(-2px); }
.ps-texto { display: grid; gap: 4px; }
.ps-texto strong { font-size: 19px; letter-spacing: -0.01em; }
.ps-texto span { color: var(--gris); }

.producto-privado { margin-top: 96px; padding: 88px max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))); background: var(--c); color: #fff; }
.producto-privado h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -0.035em; }
.producto-privado p { margin-top: 22px; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
.producto-privado p { max-width: 46ch; }

.producto-final { max-width: var(--ancho); margin: 0 auto; padding: 96px var(--margen) 16px; }
.producto-final .ph-acciones { margin-top: 28px; }
.producto-final .boton.principal { background: var(--c); border-color: var(--c); color: #fff; }
.producto-final .boton.principal:hover { background: color-mix(in srgb, var(--c) 85%, #000); }
.producto-final:has(.ph-acciones:empty) { display: none; }

.producto-mas { max-width: var(--ancho); margin: 0 auto; padding: 72px var(--margen) 112px; }
.producto-mas ul { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.producto-mas a span:last-child { white-space: nowrap; }
.producto-mas a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-decoration: none; font-weight: 650; font-size: 16px; transition: background-color 160ms ease; }
.producto-mas a:hover { background: var(--blanco); }
.producto-mas .tesela-app { width: 38px; height: 38px; border-radius: 10px; }

html[lang="zh-Hans"] .producto-hero h1 { max-width: 12em; line-height: 1.15; }

@media (min-width: 760px) {
  .pfn-lista { grid-template-columns: 1fr 1fr; }
  .pf-columnas { grid-template-columns: 1fr 1fr; }
  .producto-suite ul { grid-template-columns: repeat(3, 1fr); }
  .producto-formatos { border-radius: 28px; margin-left: max(var(--margen), calc((100% - var(--ancho)) / 2)); margin-right: max(var(--margen), calc((100% - var(--ancho)) / 2)); padding: 56px var(--margen); }
}
@media (min-width: 1100px) {
  .producto-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding: 96px max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))); min-height: 78svh; align-items: center; }
  .ph-obra { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) { .producto-suite a:hover { transform: none; } }

/* ---- Método EDVAC: dolor, autoridad, guías y llamada a la acción fija en el móvil (28-oct) ---- */
.producto-dolor, .dolor-portada { max-width: var(--ancho); margin: 0 auto; padding: 80px var(--margen) 8px; }
.producto-dolor h2, .dolor-portada h2, .senales-portada h2, .final-portada h2, .producto-guias h2, .guia-pasos h2 { max-width: 20ch; font-size: clamp(2.1rem, 4.6vw, 3.8rem); letter-spacing: -0.035em; }
.dolor-lista, .senales { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.dolor-lista li { padding: 22px 24px; border-radius: 18px; background: var(--blanco); border: 1px solid var(--linea); }
.dolor-lista h3 { margin: 0 0 8px; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.015em; line-height: 1.2; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c, var(--acento)) 70%, transparent); text-decoration-thickness: 2px; }
.dolor-lista p { margin: 0; color: var(--gris); }
.dolor-portada { --c: var(--acento); padding-top: 88px; }
.autoridad .senales { margin-top: 36px; gap: 26px 48px; }
.autoridad .senales h3 { margin: 0 0 6px; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.015em; color: #fff; }
.autoridad .senales p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
.senales-portada { max-width: var(--ancho); margin: 0 auto; padding: 88px var(--margen) 8px; }
.senales-portada .senales li { padding-left: 22px; border-left: 3px solid var(--acento); }
.senales-portada .senales h3 { margin: 0 0 8px; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.02em; }
.senales-portada .senales p { margin: 0; max-width: 46ch; color: var(--gris); }
.final-portada { max-width: var(--ancho); margin: 0 auto; padding: 88px var(--margen) 8px; }
.acciones-final { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 28px; }
.producto-guias { max-width: var(--ancho); margin: 0 auto; padding: 80px var(--margen) 8px; }
.producto-guias ul { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.producto-guias a { display: block; padding: 16px 20px; border-radius: 14px; background: var(--blanco); border: 1px solid var(--linea); font-weight: 650; text-decoration: none; }
.producto-guias a::after { content: " →"; color: var(--c, var(--acento)); }
.producto-guias a:hover { border-color: var(--tinta); }
.guia-pasos { max-width: var(--ancho); margin: 0 auto; padding: 88px var(--margen) 8px; }
.guia-pasos ol { list-style: none; margin: 40px 0 32px; padding: 0; display: grid; gap: 22px; }
.guia-pasos li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; }
.guia-pasos .num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c); color: #fff; font-weight: 750; font-size: 20px; }
.guia-pasos h3 { margin: 4px 0 6px; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.02em; }
.guia-pasos p { margin: 0; max-width: 60ch; color: var(--gris); }
.guia-pasos .boton.principal { background: var(--c, var(--acento-boton)); border-color: var(--c, var(--acento-boton)); color: #fff; }
.final-portada .boton.principal { background: var(--acento-boton); border-color: var(--acento-boton); color: var(--sobre-acento); }
.guia-mas { margin: 36px 0 0; font-weight: 650; }
.guia-hero { min-height: 0; }
/* el botón del héroe tiene que verse sin desplazarse (EDVAC): titular algo más contenido */
.producto-hero h1 { max-width: 18ch; font-size: clamp(2.5rem, 5vw, 4.9rem); line-height: 0.98; }
.producto-hero .sub { margin: 22px 0 26px; }
.cabeza-pagina .acciones-final { margin-top: 26px; }
.cabeza-pagina .boton.principal { background: var(--acento-boton); border-color: var(--acento-boton); color: var(--sobre-acento); }
.guia-hero h1 { max-width: 20ch; font-size: clamp(2.4rem, 5.4vw, 4.8rem); }
.pie-guias { flex-basis: 100%; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pie-guias span { flex-basis: 100%; color: #fff; font-weight: 650; }
.cta-fija { display: none; }
@media (min-width: 760px) {
  .dolor-lista { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .senales { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .producto-guias ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .guia-hero { grid-template-columns: 1fr; min-height: 0; }
}
/* En el móvil la llamada a la acción queda fija abajo (arriba y al final ya está en la página). */
@media (max-width: 759px) {
  .cta-fija { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--linea); }
  .cta-fija .boton.principal { display: flex; width: 100%; justify-content: center; background: var(--c, var(--acento)); border-color: var(--c, var(--acento)); color: #fff; }
  body:has(.cta-fija) .pie { padding-bottom: 96px; }
}