/* Portada de SlopIA · editorial sobre papel (slopia.css) con un solo acento: el rojo de corregir. */

/* El rojo de corregir (--pen) vive en slopia.css: lo usa también el resultado. */

/* Primera pantalla: titular y formulario a la izquierda, el examen corregido a la derecha */
.landing .hero { text-align: left; padding: 56px 0 72px; }
@media (min-width: 768px) { .landing .hero { padding: 72px 0 96px; } }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; } }
.landing .hero h1 { margin: 0 0 22px; max-width: 12ch; font-size: clamp(2.75rem, 6.4vw, 5.25rem); }
.landing .hero p { margin-left: 0; margin-right: 0; }
.hero-lead { font-size: 1.1875rem; color: var(--ink-2); max-width: 40ch; margin-bottom: 26px; }
.landing .analyze { margin: 0; max-width: 34rem; }
.landing .analyze .button { background: var(--pen); border-color: var(--pen); color: var(--on-pen); }
.landing .hero .meta { margin: 12px 0 0; text-align: left; }
.landing .hero .status { margin: 14px 0 0; max-width: 34rem; }
.landing .console { margin: 18px 0 0; }

.exam { margin: 0; justify-self: center; width: min(100%, 420px); transform: rotate(2.5deg); transition: transform .5s var(--ease); }
.exam:hover { transform: rotate(0.5deg) translateY(-4px); }
.exam-sheet { position: relative; background: var(--card); padding: 10px; box-shadow: 0 24px 48px -28px rgba(10, 31, 52, .55); }
.exam img { display: block; width: 100%; height: auto; }
.exam-marks { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); overflow: visible; }
.exam-box { fill: none; stroke: var(--pen); stroke-width: 5; }
.exam-box.soft { stroke-dasharray: 14 9; stroke-width: 4; }
.exam-ring, .exam-underline { fill: none; stroke: var(--pen); stroke-width: 5; stroke-linecap: round; }
.exam-grade { font-family: var(--serif); font-style: italic; font-size: 104px; fill: var(--pen); }
.exam-letter { font-family: var(--serif); font-style: italic; font-size: 64px; fill: var(--pen); }
.exam-note { font-family: var(--serif); font-style: italic; font-size: 46px; fill: var(--pen); }
@media (prefers-reduced-motion: no-preference) {
  .exam-ring, .exam-underline { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: exam-draw 1.2s .4s var(--ease) forwards; }
  .exam-underline { animation-delay: 1.1s; }
  @keyframes exam-draw { to { stroke-dashoffset: 0; } }
}
.exam figcaption, .photo figcaption, .church figcaption, .specimens figcaption {
  font-family: var(--sans); font-size: .875rem; color: var(--muted); margin-top: 10px;
}
@media (max-width: 959px) { .exam { width: min(78%, 380px); } }

/* Fotos de Arucas: pequeñas, con su pie */
.photo { margin: 28px 0 0; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Corrige una frase */
.paper { background: var(--card); padding: 28px; border: 1px solid var(--rule); }
.paper textarea { min-height: 140px; font-size: 1rem; }
.correction { margin-top: 22px; }
.correction-text { font-family: var(--serif); font-size: 1.375rem; line-height: 1.5; min-height: 3em; max-width: none; }
.correction-text del { text-decoration-line: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px; color: var(--ink-2); }
.correction-score { margin: 16px 0 0; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--pen); }

/* Frase hecha o dato */
.specimens { display: grid; gap: 24px 48px; margin-top: 40px; }
@media (min-width: 768px) { .specimens { grid-template-columns: 1fr 1fr; } }
.specimens figure { margin: 0; padding: 28px 0 0; border-top: 1px solid var(--rule-strong); }
.specimen-word { font-family: var(--serif); font-size: clamp(3.5rem, 9vw, 7.5rem); line-height: 1; letter-spacing: -0.03em; margin: 0; white-space: nowrap; max-width: none; }
.specimen-word del { text-decoration-color: var(--pen); text-decoration-thickness: 0.06em; }

/* Las 18 señales */
.carta h3 { font-family: var(--serif); font-style: italic; font-size: 1.25rem; margin: 28px 0 6px; }
.carta h3:first-child { margin-top: 0; }
.carta dl { margin: 0; border-top: 1px solid var(--rule); }
.carta dl div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.carta dt { font-weight: 600; }
.carta dt span { display: block; font-weight: 400; color: var(--muted); font-size: .9375rem; }
.carta dd { margin: 0; font-family: var(--mono); color: var(--ink-2); }

/* El tique del análisis */
.slip { background: var(--card); border: 1px solid var(--rule); padding: 22px 24px 0; font-family: var(--mono); font-size: .8125rem; }
.slip-title { color: var(--muted); margin-bottom: 12px; }
.slip ol { list-style: none; margin: 0; padding: 0; }
.slip li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--rule); }
.slip li span:nth-child(2) { color: var(--ink-2); overflow-wrap: anywhere; }
.slip li span:last-child { color: var(--muted); }
.slip-total { display: flex; justify-content: space-between; gap: 12px; margin: 10px -24px 0; padding: 12px 24px; background: var(--ink); color: var(--paper); max-width: none; }

/* Cómo salen: la cifra de calibración */
.landing .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 26rem; }
.landing .tiles div:first-child dd { color: var(--pen); }

/* Quién la hace: la iglesia de basalto con la forma del logo */
.church { margin: 0; justify-self: center; width: min(100%, 420px); }
.church img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; clip-path: url(#shuriken); cursor: pointer; }
/* La ventana en forma de Z gira sobre la foto (que se queda quieta), como el logo de la cabecera.
   El recorte usa unidades del propio cuadro: 0,5 es el centro y 0,0104 pasa el logo (100) a 1,04. */
.shuriken-path { transform: translate(0.5px, 0.5px) rotate(0deg) scale(0.0104); transition: transform .6s var(--ease); }
body:has(.church:hover) .shuriken-path { transform: translate(0.5px, 0.5px) rotate(180deg) scale(0.0104); }
@media (prefers-reduced-motion: reduce) { .shuriken-path { transition: none; } }

/* Dudas */
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 16px 0; font-family: var(--serif); font-size: 1.25rem; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; overflow-wrap: anywhere; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--muted); width: 1ch; align-self: start; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: var(--ink-2); }

.landing main { overflow-x: clip; }

/* § 02: frase hecha → dato */
.swaps { width: 100%; margin-top: 40px; border-collapse: collapse; }
.swaps th { font-family: var(--mono); font-size: .8125rem; font-weight: 400; color: var(--muted); text-align: left; padding: 0 16px 12px 0; border-bottom: 1px solid var(--rule-strong); }
.swaps td { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.25; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--rule); vertical-align: top; width: 50%; }
.swaps del { color: var(--muted); text-decoration-color: var(--pen); text-decoration-thickness: 0.08em; }
@media (max-width: 599px) {
  .swaps thead { display: none; }
  .swaps tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .swaps td { display: block; width: auto; padding: 2px 0; border: 0; }
}