/* Tyche Signature Touch — sección de aseo premium de entrega.
   Hoja aparte: si se quita el <link>, el sitio queda como estaba.
   Usa variables de estilo.css, por eso se carga después de ella. */

:root{
  --st-fondo:#EFEAE2;
  --st-tarjeta:#F8F5F0;
  --st-linea:#DDD5C9;
  --st-acento:#9E4F32;
  --st-acento-suave:#C98A6E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --st-fondo:#27252A;
    --st-tarjeta:#302E34;
    --st-linea:#45424A;
    --st-acento:#E7A285;
    --st-acento-suave:#B97B61;
  }
}
:root[data-theme="dark"]{
  --st-fondo:#27252A;
  --st-tarjeta:#302E34;
  --st-linea:#45424A;
  --st-acento:#E7A285;
  --st-acento-suave:#B97B61;
}

.sig{background:var(--st-fondo); border-top:1px solid var(--st-linea); border-bottom:1px solid var(--st-linea)}
.sig .rotulo b{color:var(--st-acento)}
.sig-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:start}

.sig .tit{max-width:14ch}
.sig .tit em{font-style:normal; color:var(--st-acento)}
.sig .intro + .intro{margin-top:14px}

.sig-lista{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; padding:0; list-style:none; max-width:60ch}
.sig-lista li{font-size:13.5px; line-height:1; padding:9px 13px; border:1px solid var(--st-linea); border-radius:999px; background:var(--st-tarjeta); color:var(--tinta)}

.sig-remate{margin-top:28px; padding-left:18px; border-left:2px solid var(--st-acento-suave); max-width:46ch}
.sig-remate b{display:block; font-size:clamp(20px,2.2vw,26px); line-height:1.25; letter-spacing:-.02em; color:var(--tinta)}
.sig-remate span{display:block; margin-top:8px; font-size:15px; line-height:1.55; color:var(--tinta-2)}

.sig .acciones{margin-top:30px}
.sig .btn-s{border-color:var(--linea-fuerte); color:var(--tinta)}
.sig .btn-s:hover{border-color:var(--tinta)}

/* Mosaico de fotos: una ancha arriba, dos verticales abajo */
.sig-fotos{display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:480px; justify-self:end; width:100%}
.sig-fotos figure{margin:0; border-radius:var(--r); overflow:hidden; background:var(--st-tarjeta)}
.sig-fotos picture{display:contents}
.sig-fotos img{display:block; width:100%; height:100%; object-fit:cover}
.sig-fotos .ancha{grid-column:1 / -1; aspect-ratio:464 / 301}
.sig-fotos .alta{aspect-ratio:248 / 460}

.sig-puntos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:56px 0 0; padding:0; list-style:none}
.sig-puntos li{background:var(--st-tarjeta); border:1px solid var(--st-linea); border-radius:var(--r); padding:22px 22px 24px}
.sig-puntos .n{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--st-acento)}
.sig-puntos b{display:block; margin-top:10px; font-size:16px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--tinta)}
.sig-puntos span{display:block; margin-top:6px; font-size:14.5px; line-height:1.58; color:var(--tinta-2)}

@media (max-width:980px){
  .sig-grid{grid-template-columns:1fr; gap:40px}
  .sig-fotos{justify-self:start; max-width:560px}
}
@media (max-width:900px){
  .sig-puntos{grid-template-columns:1fr}
}
@media (max-width:420px){
  .sig-fotos{gap:8px}
}

/* Menú de escritorio con nueve secciones: dos filas parejas antes que esconderse */
@media (min-width:1221px){
  .menu{max-width:520px}
}
section[id], .portada{scroll-margin-top:108px}
