/* Clixa · web 2026. Identidad: marca v2.2 (recursos/marca-clixa-2026-v2-2) + adenda de dirección de arte web.
   Valores de marca copiados de tokens.css v2.2; si cambian allí, se cambian aquí. */

@font-face { font-family: "Outfit"; src: url("../assets/fuentes/outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fuentes/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --berenjena: #210B2C; --marfil: #F7F3EC; --glicina: #BC96E6; --amarillo: #FFC72C;
  --noche: #14061B; --ciruela: #3A1A4D; --violeta: #7C55B5; --lila: #EFE6FA;
  --gris-200: #DDD5E3; --gris-300: #C9B8D6; --gris-500: #8E7F9A; --gris-700: #5B4A66; --gris-900: #3F2D4A;
  --escena: #2A1038;
  --titulo: "Outfit", "Century Gothic", sans-serif;
  --texto: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --tracking: -0.045em;
  --entrada: cubic-bezier(0.16, 1, 0.3, 1); --clic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-micro: 120ms; --t-pulso: 200ms; --t-ui: 280ms; --t-viaje: 400ms;
  --gutter: clamp(20px, 4.5vw, 64px);
  --max: 1312px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--berenjena); color: var(--marfil); font-family: var(--texto); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.t { font-family: var(--titulo); font-weight: 400; letter-spacing: var(--tracking); line-height: 0.98; margin: 0; text-wrap: balance; }
.caja { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.rot { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.sec { position: relative; padding-block: clamp(80px, 11vw, 160px); }
.marfil { background: var(--marfil); color: var(--berenjena); }
.glicina { background: var(--glicina); color: var(--berenjena); }

/* La muesca: el clic deja su marca abajo a la derecha */
.muesca { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--m) * 0.6), calc(100% - var(--m)) calc(100% - var(--m)), calc(100% - var(--m) * 0.6) 100%, 0 100%); }
.campo { display: inline-block; background: var(--amarillo); color: var(--berenjena); line-height: 1; padding: 0 0.36em 0.06em 0.14em; --m: 0.36em; }

/* Botones: únicas esquinas redondeadas */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 12px; border: 0; background: var(--amarillo); color: var(--berenjena); font-weight: 600; font-size: 17px; text-decoration: none; cursor: pointer; transition: transform var(--t-micro) var(--entrada); }
.btn:active { transform: scale(0.96); }
.btn.oscuro { background: var(--berenjena); color: var(--marfil); }
.enlace { font-size: 16px; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.enlace:hover { text-decoration-thickness: 2px; }

/* Aviso de vista previa */
.previa { background: var(--amarillo); color: var(--berenjena); font-size: 14px; text-align: center; padding: 8px var(--gutter); }

/* ——— Navegación ——— */
.nav { position: sticky; top: 0; z-index: 20; background: var(--berenjena); }
.nav .caja { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.nav .logo img { height: 38px; width: auto; }
.nav ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav ul a { text-decoration: none; color: var(--gris-300); font-size: 16px; padding-block: 12px; display: inline-block; }
.nav ul a:hover { color: var(--marfil); }
.nav .btn { min-height: 46px; padding: 0 20px; font-size: 16px; }

/* ——— Hero A: la tecla elegida ——— */
.hero { position: relative; padding-block: clamp(8px, 2vw, 24px) clamp(64px, 7vw, 104px); }
.hero .caja { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: end; }
.escena-w { grid-column: 2; grid-row: 1; position: relative; align-self: end; height: clamp(420px, calc(100svh - 230px), 680px); --m: clamp(72px, 9vw, 128px); margin-right: clamp(36px, 4vw, 60px); }
.escena { position: absolute; inset: 0; background: var(--escena); overflow: hidden; }
.escena img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.escena-w .puntero { position: absolute; width: clamp(64px, 7.6vw, 112px); right: calc(clamp(36px, 4vw, 60px) * -1 + 4px); bottom: calc(var(--m) * -0.25); }
.hero-texto { grid-column: 1 / span 2; grid-row: 1; position: relative; z-index: 2; padding-bottom: clamp(8px, 2vw, 24px); max-width: 1000px; }
.hero h1 { font-size: clamp(64px, 10.4vw, 156px); }
.hero .sub { max-width: 34ch; font-size: clamp(17px, 1.5vw, 21px); color: var(--gris-300); margin: clamp(24px, 3vw, 40px) 0 32px; }
.hero .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.micro { font-size: 14px; color: var(--gris-300); margin: 14px 0 0; }

/* ——— ¿Te pasa esto? ——— */
.pasa .caja { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.pasa .rot { color: var(--gris-700); padding-top: 18px; }
.situaciones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gris-200); }
.situaciones li { border-bottom: 1px solid var(--gris-200); }
.sit { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: clamp(18px, 2vw, 26px) 0; font-family: var(--titulo); font-size: clamp(26px, 3.1vw, 44px); letter-spacing: -0.035em; line-height: 1.08; color: var(--gris-300); transition: color var(--t-ui) var(--entrada); }
.sit:hover { color: var(--gris-700); }
.sit:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 4px; }
.sit[aria-pressed="true"] { color: var(--berenjena); }
.sit .ancla { position: relative; display: inline; }
.sit .marca { background-image: linear-gradient(var(--amarillo), var(--amarillo)); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size var(--t-ui) var(--entrada); padding: 0 0.12em; margin: 0 -0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sit[aria-pressed="true"] .marca { background-size: 100% 100%; }
.sit .ptr { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.62em; margin-left: 0.04em; opacity: 0; transform: translate(0.5em, 0.5em); transition: opacity var(--t-viaje) var(--clic), transform var(--t-viaje) var(--clic); transition-delay: 0ms; }
.sit[aria-pressed="true"] .ptr { opacity: 1; transform: none; transition-delay: var(--t-ui); }
.respuesta { margin: clamp(28px, 3vw, 40px) 0 0; font-size: clamp(18px, 1.6vw, 22px); max-width: 46ch; color: var(--gris-900); min-height: 3em; }
.pasa .cierre { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }

/* ——— Qué hace Clixa ——— */
.hace .rot { color: var(--gris-300); margin-bottom: clamp(24px, 3vw, 40px); }
.areas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gris-700); }
.area { border-bottom: 1px solid var(--gris-700); }
.area > button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 16px 40px; align-items: center; padding: clamp(16px, 2vw, 24px) 0; }
.area > button:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 4px; }
.area .nom { font-family: var(--titulo); font-size: clamp(40px, 7vw, 104px); letter-spacing: -0.05em; line-height: 1; color: var(--gris-700); transition: color var(--t-ui) var(--entrada); }
.area .que { font-size: 18px; color: var(--gris-500); transition: color var(--t-ui) var(--entrada); }
.area > button:hover .nom { color: var(--gris-300); }
.area.on .nom { color: var(--marfil); }
.area.on .que { color: var(--gris-300); }
.vista-w { display: none; padding: 0 0 clamp(24px, 3vw, 36px); }
.area.on .vista-w { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; }
.vista-w > div { grid-column: 2; position: relative; }
.vista { --m: 46px; overflow: hidden; }
.vista + .puntero { position: absolute; width: 64px; right: -30px; bottom: -14px; }
.vista-rot { font-size: 13px; color: var(--gris-500); margin: 10px 0 0; }
/* Web de ejemplo (no es Clixa: su propia paleta y letra) */
.demo-web { background: #F3EDE2; color: #1F3D33; font-family: Georgia, "Times New Roman", serif; aspect-ratio: 16 / 10.5; display: grid; grid-template-rows: auto 1fr; }
.demo-web .b { font: 600 12px Arial, sans-serif; padding: 10px 14px; border-bottom: 1px solid #D8CDBA; display: flex; justify-content: space-between; }
.demo-web .c { display: grid; grid-template-columns: 1.1fr 0.9fr; }
.demo-web .tx { padding: 18px 14px; font-size: 24px; line-height: 1.05; }
.demo-web .tx small { display: block; font: 11px/1.4 Arial, sans-serif; margin-top: 10px; }
.demo-web .im { background: #C8643C; position: relative; overflow: hidden; }
.demo-web .im::after { content: ""; position: absolute; left: 18%; bottom: 0; width: 56%; height: 66%; background: #1F3D33; border-radius: 999px 999px 0 0; }
/* Chat de ejemplo: aspecto de WhatsApp, colores y letra de la interfaz */
.demo-wa { background: #EFEAE2; color: #111B21; font: 14px/1.32 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.demo-wa .bb { max-width: 84%; padding: 6px 9px; border-radius: 8px; background: #fff; }
.demo-wa .bb.s { align-self: flex-end; background: #D9FDD3; }
.demo-wa .h { display: block; text-align: right; font-size: 10px; color: #667781; }

/* ——— Cómo trabajamos ——— */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); counter-reset: paso; }
.pasos li { border-top: 2px solid var(--berenjena); padding-top: 18px; }
.pasos .n { font-size: 14px; color: var(--gris-900); }
.pasos h3 { font-family: var(--titulo); font-weight: 400; letter-spacing: -0.035em; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; margin: 10px 0 10px; }
.pasos p { margin: 0; color: var(--gris-900); max-width: 32ch; }
.como h2 { font-size: clamp(44px, 6vw, 88px); margin-bottom: clamp(40px, 5vw, 72px); max-width: 14ch; }

/* ——— Gene ——— */
.gene .caja { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.gene .rot { color: var(--gris-700); border-top: 2px solid var(--berenjena); padding-top: 16px; align-self: start; }
.gene blockquote { margin: 0; font-size: clamp(40px, 5.6vw, 84px); }
.trazo { display: block; width: min(320px, 60%); height: auto; margin: clamp(28px, 3vw, 40px) 0 18px; overflow: visible; }
.trazo path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.visto .trazo path { animation: trazar 700ms var(--entrada) 200ms forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.firma { display: flex; flex-direction: column; gap: 2px; }
.firma b { font-family: var(--titulo); font-weight: 400; font-size: 30px; letter-spacing: -0.03em; }
.firma span { color: var(--gris-900); }

/* ——— Preguntas ——— */
.faq .caja { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.faq h2 { font-size: clamp(36px, 4vw, 56px); }
.faq details { border-top: 1px solid var(--gris-700); }
.faq details:last-child { border-bottom: 1px solid var(--gris-700); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font-family: var(--titulo); font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.03em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; border-right: 2px solid var(--glicina); border-bottom: 2px solid var(--glicina); transform: translateY(-70%) rotate(45deg); transition: transform var(--t-ui) var(--entrada); }
.faq details[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.faq details p { margin: 0 0 24px; color: var(--gris-300); max-width: 60ch; }

/* ——— Contacto y formulario ——— */
.contacto .caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contacto h2 { font-size: clamp(48px, 7vw, 108px); max-width: 10ch; }
.contacto .lead { color: var(--berenjena); font-size: clamp(18px, 1.6vw, 21px); max-width: 34ch; margin: 28px 0 0; }
.form-w { --m: 56px; background: var(--marfil); color: var(--berenjena); padding: clamp(24px, 3.4vw, 44px) clamp(22px, 3.4vw, 44px) calc(var(--m) + 18px); position: relative; }
.form-w + .puntero { position: absolute; width: 76px; right: -34px; bottom: -18px; }
.form-col { position: relative; }
form { display: grid; gap: 20px; }
.campo-f { display: grid; gap: 8px; }
.campo-f label, fieldset legend { font-size: 15px; font-weight: 600; }
.campo-f input, .campo-f textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--gris-300); border-radius: 0; background: #fff; color: var(--berenjena); font-size: 17px; }
.campo-f textarea { min-height: 110px; resize: vertical; }
.campo-f input:focus, .campo-f textarea:focus { outline: none; border-color: var(--berenjena); box-shadow: 0 0 0 3px var(--amarillo); }
.ayuda { font-size: 13px; color: var(--gris-700); margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--gris-300); font-size: 15px; cursor: pointer; transition: background var(--t-ui) var(--entrada), border-color var(--t-ui) var(--entrada); }
.opcion input:checked + span { background: var(--amarillo); border-color: var(--amarillo); font-weight: 600; }
.opcion input:focus-visible + span { outline: 3px solid var(--berenjena); outline-offset: 2px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.estado { margin: 0; font-size: 15px; min-height: 1.5em; }
.estado.error { color: #A3122A; font-weight: 600; }
.enviado { display: none; }
.form-w.ok form { display: none; }
.form-w.ok .enviado { display: block; }
.enviado h3 { font-family: var(--titulo); font-weight: 400; font-size: clamp(32px, 3vw, 44px); letter-spacing: -0.035em; margin: 0 0 12px; line-height: 1.05; }
.enviado p { margin: 0; color: var(--gris-900); }

/* ——— Pie ——— */
.pie .caja { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; padding-block: clamp(56px, 7vw, 96px) clamp(36px, 4vw, 56px); color: var(--gris-300); font-size: 15px; }
.pie img { height: 40px; width: auto; }
.pie nav { display: flex; gap: 24px; flex-wrap: wrap; }
.franjas i { display: block; }
.franjas i:nth-child(1) { height: clamp(26px, 3.2vw, 46px); background: var(--ciruela); }
.franjas i:nth-child(2) { height: clamp(16px, 1.95vw, 28px); background: var(--violeta); }
.franjas i:nth-child(3) { height: clamp(9px, 1.1vw, 16px); background: var(--glicina); }

/* ——— Movimiento de entrada del hero (1500 ms, tiempos de la marca) ——— */
@keyframes subir { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes abrir { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes viajar { from { opacity: 0; transform: translate(46px, 46px); } to { opacity: 1; transform: none; } }
@keyframes pulsar { 0% { transform: none; } 45% { transform: scale(0.86); } 100% { transform: none; } }
.js .hero-texto { animation: subir 400ms var(--entrada) both; }
.js .escena { animation: abrir 500ms var(--entrada) 300ms both; }
.js .escena-w .puntero { animation: viajar 400ms var(--clic) 900ms both; }
.js .escena-w .puntero img { transform-origin: 22% 22%; animation: pulsar 200ms var(--entrada) 1300ms both; }
/* Una acción por sección al entrar en pantalla */
.js .aparece { opacity: 0; transform: translateY(24px); transition: opacity 400ms var(--entrada), transform 400ms var(--entrada); }
.js .aparece.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .aparece { opacity: 1; transform: none; }
  .trazo path { stroke-dashoffset: 0; }
}

/* ——— Teléfono ——— */
@media (max-width: 860px) {
  .nav ul { display: none; }
  .nav .logo img { height: 32px; }
  .hero .caja { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; }
  .escena-w { grid-column: 1; grid-row: 1; height: clamp(260px, 76vw, 400px); margin-right: 28px; --m: 64px; }
  .escena-w .puntero { width: 58px; right: -26px; }
  .hero-texto { grid-column: 1; grid-row: 2; margin-top: -0.62em; font-size: clamp(64px, 19vw, 92px); }
  .hero-texto h1 { font-size: 1em; }
  .hero .sub { margin-top: 20px; }
  .pasa .caja, .gene .caja, .faq .caja, .contacto .caja { grid-template-columns: minmax(0, 1fr); }
  .area > button, .area.on .vista-w { grid-template-columns: minmax(0, 1fr); }
  .vista-w > div { grid-column: 1; margin-right: 30px; }
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .form-w + .puntero { width: 60px; right: -12px; }
  .form-col { margin-right: 20px; }
}