/* Atalaya · web pública. Misma identidad que la app (técnica y neutra, Geist, azul profundo): la página y los trozos
   de interfaz que enseña tienen que parecer la misma cosa. Dirección: «el producto actúa» (tasteskill). */

:root {
  --bg: #fafafa;
  --surface: #f0f0f2;      /* un paso de tono: separa superficies sin líneas */
  --surface-2: #e6e6e9;
  --ink: #18181b;
  --muted: #52525b;
  --accent: #1d4ed8;
  --accent-strong: #1e40af;
  --accent-ink: #ffffff;
  --ui-bg: #ffffff;        /* dentro de los fragmentos de la app */
  --ui-line: #e4e4e7;
  --ui-muted: #71717a;

  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Cinco tamaños: titular, sección, entradilla, texto, nota. */
  --step-display: clamp(2.6rem, 1.2rem + 4.4vw, 5rem);
  --step-head: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
  --step-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --step-body: 1.0625rem;
  --step-small: 0.875rem;

  --margin: clamp(1rem, 3vw, 2.5rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(6rem, 13vw, 13rem);
  --radius: 0px;           /* la página es de esquinas rectas; los fragmentos de la app llevan las suyas */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { max-width: 62ch; text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: var(--step-small); line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { padding-inline: var(--margin); max-width: 1440px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: calc(var(--section) / 2); }

/* ---------- controles ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem;
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; font-weight: 500;
  white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-strong); }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- navegación ---------- */
.nav { display: flex; align-items: center; gap: 2rem; padding-block: 1.75rem; }
.wordmark { font-weight: 600; font-size: var(--step-lead); letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem; }
.wordmark svg { width: 22px; height: 22px; }
.nav-links { display: flex; gap: 1.75rem; margin-left: auto; font-size: var(--step-small); }
.nav-links a { text-decoration: none; color: var(--muted); }
.nav-links a:hover { color: var(--ink); }
.nav .entrar { font-size: var(--step-small); text-decoration: none; }
.nav .button { min-height: 2.5rem; padding: 0 1rem; font-size: var(--step-small); }

/* ---------- hero: titular arriba a la izquierda; el escenario azul con la app, abajo a la derecha ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.hero > .wrap { width: 100%; } /* en una columna flex, margin auto encogería el bloque al ancho del texto */
.hero-copy { padding-top: clamp(3rem, 9vh, 7rem); }
.hero h1 { font-size: var(--step-display); line-height: 1; letter-spacing: -0.045em; font-weight: 600; max-width: 11ch; }
.hero .lead { font-size: var(--step-lead); line-height: 1.45; color: var(--muted); max-width: 40ch; margin-top: 1.5rem; }
.hero .acciones { display: flex; gap: 1.5rem; align-items: center; margin-top: 2rem; flex-wrap: wrap; }
.hero .acciones .link { color: var(--muted); }
.escenario {
  position: absolute; right: 0; bottom: 0; width: 64%; height: 58%;
  background: var(--accent);
  /* la esquina cortada en chaflán: la única forma decorativa de la página */
  clip-path: polygon(96px 0, 100% 0, 100% 100%, 0 100%, 0 96px);
  padding: 56px 0 0 56px;
}
.demo-nota { position: absolute; left: var(--margin); bottom: 1.5rem; max-width: 34ch; color: var(--muted); }

/* ---------- fragmentos de la app (data-ui): sus propias reglas, como en el producto ---------- */
[data-ui] { font-size: 14px; line-height: 1.4; color: var(--ink); font-family: var(--font); }
[data-ui] .clave { font-size: 12.5px; color: var(--ui-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.ui-panel { background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 10px; } /* taste-skill-ignore: borde del panel de la app (data-ui) */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 550; border-radius: 999px; padding: 1px 8px; line-height: 1.5; white-space: nowrap; color: var(--c, #52525b); background: color-mix(in srgb, var(--c, #52525b) 11%, transparent); }
.p-urgente { --c: #c82828; } .p-alta { --c: #c2410c; } .p-normal { --c: #2563eb; } .p-curso { --c: #2563eb; } .p-hecho { --c: #15803d; } .p-pend { --c: #71717a; } .p-form { --c: #0f766e; }
.avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10.5px; font-weight: 600; flex: none; }
.av-a { background: #0f766e; } .av-m { background: #b45309; } .av-l { background: #1d4ed8; } .av-j { background: #be185d; } .av-x { background: #a1a1aa; }

/* Hero: asistente + columna del tablero */
.app-hero { width: 640px; max-width: calc(100% - 56px); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 10px 0 0 0; height: calc(100% + 2px); }
.asistente { background: #f8f8f9; border-right: 1px solid var(--ui-line); display: flex; flex-direction: column; padding: 14px; gap: 10px; } /* taste-skill-ignore: borde del propio panel de la app (data-ui) */
.asistente-titulo { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.asistente-titulo .punto { width: 7px; height: 7px; border-radius: 50%; background: #15803d; }
.msg { border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.45; }
.msg-tu { background: var(--accent); color: #fff; align-self: flex-end; max-width: 92%; }
.msg-ia { background: #fff; border: 1px solid var(--ui-line); max-width: 96%; } /* taste-skill-ignore: burbuja del asistente en la app (data-ui) */
.msg-ia b { font-weight: 600; }
.peticion { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.peticion textarea { width: 100%; resize: none; border: 1px solid #d4d4d8; border-radius: 8px; padding: 8px 10px; font: 13px/1.4 var(--font); background: #fff; min-height: 64px; }
.peticion textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.peticion-fila { display: flex; gap: 6px; align-items: center; }
.sugerencia { font-size: 12px; border: 1px solid var(--ui-line); background: #fff; border-radius: 999px; padding: 2px 9px; color: #3f3f46; transition: border-color var(--t-hover); } /* taste-skill-ignore: botón de sugerencia de la app (data-ui) */
.sugerencia:hover { border-color: var(--accent); }
.enviar { margin-left: auto; background: var(--accent); color: #fff; border-radius: 6px; padding: 4px 10px; font-size: 12.5px; font-weight: 550; transition: background var(--t-hover), transform var(--t-press); }
.enviar:hover { background: var(--accent-strong); }
.enviar:active { transform: scale(0.96); }
.columna { padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.columna-cab { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #3f3f46; }
.columna-cab .n { margin-left: auto; font-weight: 500; color: var(--ui-muted); }
.tarjeta { border: 1px solid var(--ui-line); border-radius: 8px; padding: 9px 10px; background: #fff; display: grid; gap: 6px; transition: border-color var(--t-hover), box-shadow var(--t-hover); } /* taste-skill-ignore: tarjeta de la app (data-ui) */
.tarjeta:hover { border-color: #c7c7cc; }
.tarjeta .t { font-weight: 550; font-size: 13.5px; line-height: 1.3; }
.tarjeta .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tarjeta .meta .avatar { margin-left: auto; }
.tarjeta.nueva { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } /* taste-skill-ignore: resalte de la tarjeta recién creada, dentro de la app (data-ui) */
@media (prefers-reduced-motion: no-preference) {
  .tarjeta.nueva { animation: llega 520ms var(--ease-out); }
}
@keyframes llega { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }

/* ---------- secciones: frase a un lado, fragmento al otro ---------- */
.titulo { font-size: var(--step-head); line-height: 1.1; letter-spacing: -0.03em; }
.entradilla { font-size: var(--step-body); color: var(--muted); margin-top: 0.9rem; max-width: 46ch; }

/* Escaparate: el sprint con sus controles */
.escaparate-cab { grid-column: 1 / span 6; }
.demo-panel { grid-column: 1 / -1; margin-top: 2.5rem; background: var(--surface); display: grid; grid-template-columns: 62fr 38fr; max-width: 1080px; min-height: 560px; }
.demo-tablero { padding: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
.demo-tablero .col { display: flex; flex-direction: column; gap: 8px; }
.demo-tablero .tarjeta[hidden] { display: none; }
.demo-controles { background: var(--surface-2); padding: 20px 22px; display: flex; flex-direction: column; }
.control { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 12px; font-size: var(--step-small); }
.control + .control { box-shadow: inset 0 1px 0 rgba(24, 24, 27, 0.07); } /* taste-skill-ignore: separador de filas del panel de filtros de la app (data-ui) */
.interruptor { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #c4c4ca; flex: none; transition: background var(--t-hover); }
.interruptor::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--t-hover) var(--ease-out); }
.interruptor[aria-checked='true'] { background: var(--accent); }
.interruptor[aria-checked='true']::after { transform: translateX(14px); }
.segmentos { display: inline-flex; background: #d9d9de; border-radius: 6px; padding: 2px; }
.segmentos button { font-size: 12.5px; padding: 3px 9px; border-radius: 5px; color: #3f3f46; }
.segmentos button[aria-pressed='true'] { background: #fff; color: var(--ink); font-weight: 550; }
.demo-pie { margin-top: auto; padding-top: 18px; font-size: var(--step-small); }
.demo-pie a { color: var(--accent); }
.demo-resumen { font-size: 13px; color: #52525b; padding: 0 28px 24px; grid-column: 1; align-self: end; }
.escaparate-nota { grid-column: 1 / span 6; margin-top: 1.25rem; color: var(--muted); }

/* Ficha de una tarea con notas al margen */
.ficha { position: relative; }
.ficha-cab { grid-column: 1 / span 4; text-align: right; align-self: start; }
.ficha-cab .entradilla { margin-left: auto; }
.lamina { grid-column: 5 / span 4; width: 100%; max-width: 400px; justify-self: center; }
.notas { display: contents; }
.nota { max-width: 26ch; transition: color var(--t-hover); cursor: default; }
.nota h3 { font-size: var(--step-lead); font-weight: 550; letter-spacing: -0.01em; }
.nota p { font-size: var(--step-small); color: var(--muted); margin-top: 0.25rem; }
.nota-izq { grid-column: 1 / span 4; justify-self: end; text-align: right; }
.nota-der { grid-column: 9 / span 4; justify-self: start; }
.notas-col { display: flex; flex-direction: column; gap: 2.25rem; }
.lamina-ui { padding: 18px; display: grid; gap: 14px; }
.lamina-ui .zona { transition: opacity var(--t-hover); border-radius: 6px; }
.ficha.foco .lamina-ui .zona { opacity: 0.3; }
.ficha.foco .lamina-ui .zona.activa { opacity: 1; }
.lamina-ui .migas { font-size: 12.5px; color: var(--ui-muted); display: flex; gap: 6px; align-items: center; }
.lamina-ui h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.campo { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; font-size: 13px; }
.campo .k { color: var(--ui-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.campo .v { display: flex; align-items: center; gap: 6px; }
.evento { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.evento .cuando { color: var(--ui-muted); font-size: 11.5px; }
.evento code { font-size: 11.5px; font-variant-numeric: tabular-nums; background: #f4f4f5; border-radius: 4px; padding: 0 4px; }
.git { width: 22px; height: 22px; border-radius: 50%; background: #18181b; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.git svg { width: 12px; height: 12px; }
.antes { text-decoration: line-through; color: var(--ui-muted); }
.plazo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.plazo .barra { flex: 1; height: 6px; border-radius: 3px; background: #f4f4f5; overflow: hidden; }
.plazo .barra span { display: block; height: 100%; width: 62%; background: #c2410c; }

/* Garantías: una tabla sin líneas */
.garantias-cab { grid-column: 1 / span 7; align-self: end; }
.foto-fra { grid-column: 8 / span 5; margin: 0; }
.foto-fra img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 70% 50%; }
.foto-fra figcaption, .foto-faq figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 0.6rem; }
.garantias-cab .titulo { font-size: var(--step-display); line-height: 1; letter-spacing: -0.04em; }
.garantias-cab .titulo span { display: block; padding-left: 16.6%; }
.tabla { grid-column: 1 / -1; width: 100%; border-collapse: collapse; margin-top: 4.5rem; font-size: var(--step-body); }
.tabla th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--step-small); padding: 0 16px 12px; }
.tabla td { padding: 15px 16px; vertical-align: top; }
.tabla tbody tr:nth-child(odd) td { background: var(--surface); }
.tabla td:first-child { color: var(--muted); width: 16%; }
.tabla td:nth-child(2) { font-weight: 550; width: 26%; }
.tabla td:last-child { text-align: right; color: var(--muted); width: 16%; }

/* Precio: la cifra, muy grande */
.precio { min-height: 80svh; display: flex; align-items: center; }
.precio-txt { grid-column: 1 / span 4; align-self: start; }
.precio-cifra { grid-column: 6 / span 7; position: relative; }
.cifra { font-size: clamp(7.5rem, 3rem + 16vw, 15rem); line-height: 0.85; letter-spacing: -0.06em; font-weight: 600; display: flex; align-items: flex-start; }
.cifra .moneda { font-size: 0.5em; margin-left: 0.04em; margin-top: 0.06em; }
.cifra .periodo { font-size: var(--step-body); letter-spacing: 0; font-weight: 500; align-self: flex-end; margin: 0 0 0.6em 0.6em; color: var(--muted); }
.chip-plan { position: absolute; top: -0.4rem; left: min(48%, 15rem); }
.chip-plan .ui-panel { padding: 10px 12px; display: grid; gap: 4px; width: 230px; box-shadow: 0 10px 30px rgba(24, 24, 27, 0.14); } /* taste-skill-ignore: la ficha del plan flota sobre la cifra: es una capa */
.chip-plan .fila { display: flex; justify-content: space-between; font-size: 12.5px; }
.incluye { margin-top: 2.25rem; display: grid; gap: 0.35rem; font-size: var(--step-lead); }
.precio .button { margin-top: 2rem; }

/* Preguntas: acordeón de baldosas */
.faq-cab { grid-column: 1 / span 4; align-self: start; position: sticky; top: 96px; }
.foto-faq { margin: 2rem 0 0; max-width: 340px; }
.foto-faq img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 38% 50%; }
.faq-lista { grid-column: 5 / span 8; display: grid; gap: 8px; }
.faq-lista details { background: var(--surface); border-radius: var(--radius); transition: background var(--t-hover); }
.faq-lista summary { list-style: none; cursor: pointer; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 24px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; }
.faq-lista summary::-webkit-details-marker { display: none; }
.mas { position: relative; width: 16px; height: 16px; flex: none; }
.mas::before, .mas::after { content: ''; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; background: currentColor; transition: transform var(--t-hover) var(--ease-out); }
.mas::after { transform: rotate(90deg); }
.faq-lista details[open] { background: var(--accent); color: var(--accent-ink); }
.faq-lista details[open] .mas::after { transform: rotate(0deg); }
.faq-lista .respuesta { padding: 0 24px 24px; max-width: 58ch; font-size: 1.0625rem; }
@media (hover: hover) and (pointer: fine) {
  .faq-lista details:not([open]):hover { background: var(--surface-2); }
}

/* Cierre: una frase con un hueco, y el hueco es el formulario */
.cierre { padding-block: calc(var(--section) * 0.75); }
.frase { font-size: var(--step-head); line-height: 1.35; letter-spacing: -0.02em; font-weight: 500; max-width: 36ch; }
.frase label { display: inline; }
.frase input { width: 9em; height: 1.35em; border: 0; background: var(--surface-2); border-radius: var(--radius); padding: 0 0.3em; font-weight: 500; vertical-align: baseline; }
.frase input::placeholder { color: #8a8a93; }
.frase input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.frase button { height: 1.35em; padding: 0 0.35em; background: var(--accent); color: var(--accent-ink); font-weight: 500; transition: background var(--t-hover), transform var(--t-press); }
.frase button:hover { background: var(--accent-strong); }
.frase button:active { transform: scale(0.97); }
.cierre .small { margin-top: 1rem; color: var(--muted); }

/* Pie: baldosas */
.pie { padding: 0 10px 10px; }
.pie-tablero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.baldosa { background: var(--surface); padding: 24px; display: flex; flex-direction: column; min-height: 220px; text-decoration: none; }
.b-frase { grid-column: span 4; justify-content: space-between; }
.b-frase p:first-child { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.02em; max-width: 20ch; }
.b-nav { grid-column: span 3; }
.b-nav ul { display: grid; gap: 0.3rem; }
.b-nav a { text-decoration: none; }
.b-nav a:hover { text-decoration: underline; }
.b-hora { grid-column: span 2; justify-content: space-between; }
.b-hora .hora { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.b-correo { grid-column: span 3; justify-content: flex-end; }
.b-correo a { font-size: var(--step-lead); }
.b-marca { grid-column: span 5; background: var(--ink); color: var(--bg); min-height: 320px; align-items: center; justify-content: center; }
.b-marca span { font-size: clamp(3rem, 9vw, 9rem); font-weight: 600; letter-spacing: -0.06em; line-height: 1; }
.b-foto { grid-column: span 4; padding: 0; overflow: hidden; min-height: 320px; position: relative; margin: 0; }
.b-foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-accion { grid-column: span 3; background: var(--accent); color: var(--accent-ink); min-height: 320px; justify-content: space-between; transition: background var(--t-hover); }
.b-accion:hover { background: var(--accent-strong); }
.b-accion span { font-size: var(--step-head); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; }
.b-accion svg { align-self: flex-end; width: 48px; height: 48px; transition: transform var(--t-hover) var(--ease-out); }
.b-accion:hover svg { transform: translateX(6px); }
.creditos { font-size: var(--step-small); color: var(--muted); }
.creditos a { color: inherit; }

/* ---------- movimiento (el contenido se ve igual sin JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: sube 800ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  /* La firma: al cargar, el escenario se abre desde abajo y la app se asienta dentro. Es una animación (no depende de
     ningún observador) y termina siempre visible. */
  .escenario { animation: abre 1100ms var(--ease-in-out) 250ms both; }
  .escenario .app-hero { transform-origin: top left; animation: asienta 1500ms var(--ease-soft) 250ms both; }
  /* La foto de la torre se mueve despacio, como el cielo. */
  .foto-faq img { animation: deriva 24s ease-in-out infinite alternate; }
  .foto-faq { overflow: hidden; }
}
@keyframes sube { to { opacity: 1; transform: none; } }
@keyframes abre { from { clip-path: polygon(96px 100%, 100% 100%, 100% 100%, 0 100%, 0 100%); } to { clip-path: polygon(96px 0, 100% 0, 100% 100%, 0 100%, 0 96px); } }
@keyframes asienta { from { transform: scale(1.06) translateY(24px); } to { transform: none; } }
@keyframes deriva { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.12) translateY(-3%); } }

/* ---------- tableta ---------- */
@media (max-width: 1100px) {
  .escenario { width: 78%; }
  .demo-panel { grid-template-columns: 1fr; }
  .demo-controles { order: -1; }
  .lamina { grid-column: 4 / span 6; }
  .nota-izq { grid-column: 1 / span 3; }
  .nota-der { grid-column: 10 / span 3; }
}

/* ---------- teléfono: su propia composición ---------- */
@media (max-width: 760px) {
  .nav { gap: 1rem; padding-block: 1.25rem; }
  .nav-links { display: none; }
  .nav .entrar { margin-left: auto; }
  .hero { min-height: 0; }
  .hero h1 { font-size: 10.5vw; max-width: none; }
  .hero .lead { font-size: var(--step-body); }
  .escenario { position: relative; width: auto; height: 560px; margin: 2.5rem calc(var(--margin) * -1) 0; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px); padding: 16px 0 0 16px; }
  .escenario { animation: none; }
  .app-hero { width: 600px; max-width: none; grid-template-columns: 300px 300px; }
  .demo-nota { position: static; margin-top: 1rem; }
  .escaparate-cab, .escaparate-nota { grid-column: 1 / -1; }
  .demo-panel { margin-inline: calc(var(--margin) * -1); }
  .demo-tablero { grid-template-columns: repeat(3, 220px); overflow-x: auto; padding: 18px; }
  .control { min-height: 52px; }
  .control.extra { display: none; }
  .demo-controles.todos .control.extra { display: flex; }
  /* En el teléfono la ficha es una columna: título, la tarea y luego sus notas (sin las filas fijas de escritorio). */
  .ficha .grid > * { grid-row: auto !important; padding-top: 0 !important; }
  .ficha .ficha-cab { order: 1; } .ficha .lamina { order: 2; } .ficha .nota-izq { order: 3; } .ficha .nota-der { order: 4; }
  .ficha-cab { grid-column: 1 / -1; text-align: left; }
  .ficha-cab .entradilla { margin-left: 0; }
  .lamina { grid-column: 1 / -1; margin-top: 2rem; }
  .notas-col { grid-column: 1 / -1 !important; justify-self: stretch !important; text-align: left !important; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; margin-top: 2rem; }
  .nota { max-width: none; }
  .garantias-cab { grid-column: 1 / -1; }
  .foto-fra { grid-column: 1 / -1; margin-top: 1.5rem; }
  .foto-faq { max-width: none; }
  .foto-faq img { aspect-ratio: 3 / 2; }
  .garantias-cab .titulo { font-size: 11vw; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100% !important; }
  .tabla thead { display: none; }
  .tabla tr { padding: 14px 16px; }
  .tabla tbody tr:nth-child(odd) { background: var(--surface); }
  .tabla td { padding: 0; background: none !important; text-align: left !important; }
  .tabla td:first-child { font-size: var(--step-small); }
  .tabla td:nth-child(3), .tabla td:last-child { color: var(--muted); font-size: var(--step-small); }
  .precio { min-height: 0; }
  .precio-txt, .precio-cifra { grid-column: 1 / -1; }
  .precio-cifra { margin-top: 2.5rem; }
  .cifra { font-size: 34vw; }
  .chip-plan { left: auto; right: 0; top: -1.5rem; }
  .chip-plan .ui-panel { width: 190px; }
  .precio .button { width: 100%; }
  .faq-cab { grid-column: 1 / -1; position: static; margin-bottom: 1.5rem; }
  .faq-lista { grid-column: 1 / -1; }
  .faq-lista summary { font-size: var(--step-lead); min-height: 64px; padding: 14px 20px; }
  .faq-lista .respuesta { font-size: var(--step-body); padding: 0 20px 20px; }
  .frase { font-size: var(--step-head); }
  .frase input { display: block; width: 100%; height: 1.6em; margin: 0.3em 0; }
  .pie { padding: 0 6px 6px; }
  .pie-tablero { grid-template-columns: 1fr 1fr; gap: 6px; }
  .baldosa { padding: 20px; min-height: 160px; }
  .b-marca { grid-column: 1 / -1; order: -3; min-height: 160px; }
  .b-accion { grid-column: 1 / -1; order: -2; min-height: 160px; }
  .b-foto { grid-column: 1 / -1; order: -1; min-height: 220px; }
  .b-nav, .b-correo { grid-column: span 1; }
  .b-hora, .b-frase { grid-column: span 1; }
  .b-frase p:first-child { font-size: var(--step-lead); }
}