/* SanzWebs: page CSS. Solo lo que va dentro de un visual (el móvil de muestra, la foto que revela),
   la altura de las tarjetas de sector, y dos detalles del formulario y de las páginas legales. */

/* sectores: dos listas con su foto, una por pantalla */
#sectores .frame--fill { height: min(540px, 58svh); }
@media (max-width: 1023px) { #sectores .frame--fill { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-6); } }
#sectores .rows__name a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
@media (max-width: 639px) { #sectores .frame--fill { aspect-ratio: 16 / 9; margin-top: var(--s-4); } #sectores .rows > li { padding-block: var(--s-2); } #sectores .rows > li > p { display: none; } }
.faq-pic { height: 300px; margin-top: var(--s-5); }
.faq-pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .faq-pic { height: 200px; } }

/* la foto que se revela (picture-develops), tan alta como el texto de al lado */
.develop { margin: 0; border-radius: var(--r-lg); overflow: hidden; height: min(600px, var(--ly-fit, 600px)); }
.develop > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .develop { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-6); } }

/* pasos numerados en una lista */
.steps-rows .rows__name { display: flex; align-items: center; gap: var(--s-3); }

/* el móvil con la web base: 280x570, bisel de 8px, radio 32 */
.device-col { display: flex; justify-content: center; }
.device { width: 280px; height: 570px; padding: 8px; border-radius: 32px; background: #1d0f18; box-shadow: 0 0 0 1px rgba(237, 204, 190, .18); flex: none; }
.device__screen { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: #fbf4f0; color: #351a2b; font: 400 13px/1.4 var(--font-text); display: flex; flex-direction: column; }
.mk-bar { display: flex; justify-content: space-between; align-items: center; padding: 22px 18px 12px; }
.mk-logo { font: 400 18px/1 var(--font-display); }
.mk-burger { width: 18px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.mk-hero { margin: 6px 18px 0; padding: 18px 0 20px; border-top: 3px solid #edccbe; }
.mk-h { font: 400 27px/1.05 var(--font-display); margin: 0 0 10px; }
.mk-p { margin: 0 0 16px; color: #6c4857; }
.mk-btn { display: inline-block; padding: 10px 14px; border-radius: 999px; background: #351a2b; color: #fbf4f0; font-weight: 500; font-size: 12.5px; }
.mk-label { margin: 18px 18px 6px; font-size: 11px; letter-spacing: .04em; color: #6c4857; }
.mk-list { list-style: none; margin: 0 12px; padding: 0; }
.mk-list li { padding: 11px 6px; border-bottom: 1px solid rgba(53, 26, 43, .12); font-weight: 500; }
.mk-dock { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 10px 14px; background: #fbf4f0; border-top: 1px solid rgba(53, 26, 43, .1); }
.mk-dock span { text-align: center; padding: 8px 0; border-radius: 10px; background: #f3e1d8; font-size: 11.5px; font-weight: 500; }
@media (max-width: 1023px) { .device-col { margin-top: var(--s-6); } }
@media (max-width: 639px) { .device { width: 250px; height: 500px; } .mk-h { font-size: 23px; } }

/* formulario: la casilla de privacidad y el campo trampa para bots */
.field--check label { display: flex; gap: var(--s-2); align-items: flex-start; font-weight: 400; }
.field--check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--p-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* páginas legales: texto corrido, sin altura de pantalla */
.section.legal { height: auto; min-height: 0; }
.prose { max-width: 72ch; }
.prose h1 { font-size: var(--t-h2, 48px); margin-bottom: var(--s-5); }
.prose h2 { font-size: var(--t-h3, 28px); margin: var(--s-7) 0 var(--s-3); }
.prose p, .prose li, .prose dd, .prose td { max-width: 72ch; }
.prose ul { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); }
.prose dt { font-weight: 500; }
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { text-align: left; padding: var(--s-2); border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---------------------------------------------------------------- v2: naranja de Castellón */
/* títulos en Archivo ancho, como la rotulación de las etiquetas de caja de naranjas */
h1, h2, .mo-wh__text, .nav__logo, .footer__lede, .close__word { font-stretch: 112%; }
h1 { letter-spacing: var(--display-tracking-xl); }
body { font-stretch: 100%; }
::selection { background: var(--c1, #e8571e); color: var(--p-ink); }
:focus-visible { outline-color: var(--c1, #e8571e); }
.list-head { font: 600 var(--t-small)/1.2 var(--font-text); letter-spacing: 0; color: var(--muted); margin: 0; }

/* la portada: la foto sobre dos bloques de color que entran en orden de impresión */
.hero--split .hero__media { overflow: visible; background: none; border-radius: 0; }
.hero--split .hero__media > img { position: absolute; inset: 0 0 auto auto; width: calc(100% - 40px); height: calc(100% - 40px); border-radius: var(--r-lg); z-index: 3; }
.blk { position: absolute; border-radius: var(--r-lg); }
.blk--o { left: 0; bottom: 0; width: 46%; height: 42%; background: var(--c1, #e8571e); z-index: 1; }
.blk--g { left: 20px; bottom: 20px; top: 56px; right: 56px; background: var(--c2, #1f4d3a); z-index: 2; }
.hero--split .ly-float { z-index: 4; left: calc(40px + var(--s-4)); bottom: calc(40px + var(--s-4)); }
@media (max-width: 1023px) {
  .hero--split .hero__media > img { width: calc(100% - 20px); height: calc(100% - 20px); }
  .blk--g { left: 10px; bottom: 10px; top: 28px; right: 28px; }
  .hero--split .ly-float { left: calc(20px + var(--s-3)); bottom: calc(20px + var(--s-3)); }
}
@media (prefers-reduced-motion: no-preference) {
  .blk--o { animation: blk-in 640ms cubic-bezier(0.77, 0, 0.175, 1) 60ms both; }
  .blk--g { animation: blk-in 640ms cubic-bezier(0.77, 0, 0.175, 1) 180ms both; }
  .hero--split .hero__media > img { animation: photo-in 820ms cubic-bezier(0.23, 1, 0.32, 1) 300ms both; }
  .hero--split .ly-float { animation: float-in 420ms cubic-bezier(0.23, 1, 0.32, 1) 760ms both; }
}
@keyframes blk-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes photo-in { from { clip-path: inset(0 0 0 100%); transform: scale(1.03); } to { clip-path: inset(0); transform: none; } }
@keyframes float-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* listas de sectores sobre naranja: fila activa marcada en tinta, la foto cambia con un fundido corto */
.ground-brand .rows > li { border-color: rgba(21, 20, 15, .18); }
#sectores .frame--fill img { transition: opacity 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  #sectores .rows__name a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 220ms cubic-bezier(0.23, 1, 0.32, 1); }
  #sectores li:hover .rows__name a, #sectores li:focus-within .rows__name a { background-size: 100% 2px; }
}

/* el móvil de muestra con los colores nuevos */
.device { background: var(--p-ink); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .45); }
.device__screen { background: var(--p-bg); color: var(--p-ink); }
.mk-hero { border-top-color: var(--c1, #e8571e); }
.mk-btn { background: var(--c1, #e8571e); color: var(--p-ink); }
.mk-p, .mk-label { color: #57544b; }
.mk-list li { border-bottom-color: rgba(21, 20, 15, .12); }
.mk-dock { background: #fafaf7; border-top-color: rgba(21, 20, 15, .1); }
.mk-dock span { background: #f0eee8; }
/* el h1 del hero: ancho normal para que quepa en 3 líneas en la columna de texto */
.hero h1 { font-stretch: 100%; }
@media (min-width: 1024px) { .hero h1 { font-size: clamp(48px, 4.4vw, 64px); line-height: 1.02; } }
@media (max-width: 639px) { .hero--split .ly-float { display: none; } }
.ground-brand .list-head { color: var(--p-ink); }
[data-peek] li[tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
@media (max-width: 359px) { .nav__actions .btn { display: none; } }
/* la tarjeta flotante sin punto que late: un cuadrado naranja quieto, como una marca de registro */
.ly-live::before { animation: none !important; border-radius: 1px; background: var(--c1, #e8571e) !important; }

.hero .btn--secondary { background: #e9e4da; box-shadow: inset 0 0 0 1px rgba(29, 35, 41, .14); }
/* la marca del logo: azul pizarra sobre claro, arena sobre azul */
.nav .mark { background: var(--c2); }
.ground-inverse .mark { background: var(--c1); }