/* ============================================================
   ROJATO STUDIO v3 -- hoja de estilo compartida (19/9/2026)
   ------------------------------------------------------------
   Por que un archivo y no el <style> adentro de cada pagina, como en la v2:
   la v3 son CUATRO paginas (portada + tres categorias) y el CSS es el mismo
   en las cuatro. Inline significaba copiarlo cuatro veces y que se
   desincronizara a la primera edicion.

   Vive bajo /vitrina/ a proposito: es el unico prefijo que nginx ya sirve
   del disco con un `location` propio. Cualquier otra ruta nueva caeria en
   `location /` (proxy a uvicorn) y habria que editar nginx en el VPS a mano.

   La paleta NO cambia respecto de la v2 -- terracota #C1442D en claro y
   #E2593D en oscuro, papel hueso calido. Lo que cambia es la densidad: la
   v2 era una pagina editorial larga de una sola categoria; la v3 tiene que
   dejar elegir entre tres en la primera pantalla de un celular.
   ============================================================ */

:root{
  color-scheme: light;

  --papel:#F6F2EC;
  --superficie:#FFFFFF;
  --superficie-2:#EFE9E1;

  --tinta:#17130F;
  --tinta-2:#4A423B;
  --apagado:#857A70;

  --filete:#E0D7CB;
  --filete-fuerte:#CDBFAF;

  --acento:#C1442D;
  --sobre-acento:#FFF8F5;
  --whatsapp:#1F8B4C;

  --ancho:1120px;
  --canal:clamp(16px, 5vw, 56px);
  --salto:clamp(56px, 9vw, 108px);
  --radio:4px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    color-scheme: dark;
    --papel:#131110;
    --superficie:#1B1817;
    --superficie-2:#242020;
    --tinta:#F4EFE9;
    --tinta-2:#CFC5BB;
    --apagado:#9A8F85;
    --filete:#2E2926;
    --filete-fuerte:#453D38;
    --acento:#E2593D;
    --sobre-acento:#17130F;
    --whatsapp:#3FBF77;
  }
}
:root[data-tema="oscuro"]{
  color-scheme: dark;
  --papel:#131110;
  --superficie:#1B1817;
  --superficie-2:#242020;
  --tinta:#F4EFE9;
  --tinta-2:#CFC5BB;
  --apagado:#9A8F85;
  --filete:#2E2926;
  --filete-fuerte:#453D38;
  --acento:#E2593D;
  --sobre-acento:#17130F;
  --whatsapp:#3FBF77;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

img,video{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

.envoltura{ width:100%; max-width:var(--ancho); margin:0 auto; padding-inline:var(--canal); }

.serif{
  font-family:"Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.08;
}

/* Salta al contenido -- primer tabulador de la pagina. */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--acento); color:var(--sobre-acento);
  padding:12px 18px; border-radius:var(--radio);
}
.saltar:focus{ left:12px; top:12px; }

/* ---------- Barra ---------- */
.centinela{ height:1px; }

.barra{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.barra--fija{ border-bottom-color:var(--filete); }

.barra__fila{
  display:flex; align-items:center; gap:14px;
  min-height:60px;
}
.marca{ display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto; }
.marca img{ width:26px; height:26px; }
.marca b{ font-size:16.5px; letter-spacing:-.015em; }

.barra__nav{ display:none; gap:22px; }
.barra__nav a{ text-decoration:none; color:var(--tinta-2); font-size:15px; }
.barra__nav a:hover{ color:var(--acento); }
@media (min-width:860px){ .barra__nav{ display:flex; } }

/* ---------- Botones ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:13px 22px;
  border:0; border-radius:var(--radio);
  font:inherit; font-weight:600; font-size:16px;
  text-decoration:none; cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.boton:active{ transform:translateY(1px); }
.boton--wa{ background:var(--whatsapp); color:#fff; }
.boton--wa:hover{ filter:brightness(1.07); }
.boton--acento{ background:var(--acento); color:var(--sobre-acento); }
.boton--acento:hover{ filter:brightness(1.07); }
.boton--linea{ background:transparent; color:var(--tinta); border:1px solid var(--filete-fuerte); }
.boton--linea:hover{ border-color:var(--acento); color:var(--acento); }
.boton--chico{ min-height:44px; padding:10px 16px; font-size:15px; }
.boton--ancho{ width:100%; }

.par-botones{ display:flex; flex-wrap:wrap; gap:11px; }
@media (max-width:520px){
  .par-botones{ flex-direction:column; }
  .par-botones .boton{ width:100%; }
}

/* ---------- Portada ---------- */
.portada{ padding-block:clamp(34px,7vw,72px) clamp(26px,5vw,44px); }
.portada h1{
  margin:0 0 16px;
  font-size:clamp(38px, 8.5vw, 70px);
}
.portada p{
  margin:0 0 26px;
  max-width:46ch;
  font-size:clamp(17px, 2.3vw, 20px);
  color:var(--tinta-2);
}

/* La linea de confianza que resuelve la duda nicaraguense numero uno:
   "no tengo tarjeta". Va arriba del fold a proposito. */
.pago-linea{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:22px; padding:13px 15px;
  background:var(--superficie); border:1px solid var(--filete);
  border-radius:var(--radio);
  font-size:14.5px; color:var(--tinta-2);
  max-width:52ch;
}
.pago-linea b{ color:var(--tinta); }

/* ---------- Las tres categorias ---------- */
.categorias{
  display:grid; gap:16px;
  grid-template-columns:1fr;
  padding-bottom:var(--salto);
}
@media (min-width:760px){ .categorias{ grid-template-columns:repeat(3,1fr); gap:20px; } }

.cat{
  display:flex; flex-direction:column;
  background:var(--superficie);
  border:1px solid var(--filete);
  border-radius:var(--radio);
  overflow:hidden;
  text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.cat:hover{ border-color:var(--acento); transform:translateY(-2px); }
.cat__arte{ aspect-ratio:4/3; width:100%; object-fit:cover; background:var(--superficie-2); }
.cat__cuerpo{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; gap:7px; }
.cat__titulo{ margin:0; font-size:26px; }
.cat__que{ margin:0; font-size:15.5px; color:var(--tinta-2); }
.cat__desde{
  margin-top:auto; padding-top:13px;
  font-size:15px; color:var(--apagado);
}
.cat__desde b{ color:var(--acento); font-size:20px; }
.cat__ir{ margin-top:11px; font-weight:600; color:var(--acento); font-size:15.5px; }

/* ---------- Secciones ---------- */
.seccion{ padding-block:var(--salto); border-top:1px solid var(--filete); }
.seccion__titulo{ margin:0 0 8px; font-size:clamp(28px,5vw,42px); }
.seccion__bajada{ margin:0 0 30px; max-width:52ch; color:var(--tinta-2); }

/* ---------- Lista de precios ---------- */
.precios{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:720px){ .precios{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; } }

.precio{
  display:flex; flex-direction:column; gap:8px;
  background:var(--superficie);
  border:1px solid var(--filete);
  border-radius:var(--radio);
  padding:20px;
}
.precio--destacado{ border-color:var(--acento); border-width:2px; }
.precio__etiqueta{
  align-self:flex-start;
  background:var(--acento); color:var(--sobre-acento);
  font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 9px; border-radius:99px;
}
.precio h3{ margin:0; font-size:20px; letter-spacing:-.01em; }
.precio__cifra{ font-size:32px; font-weight:600; color:var(--acento); line-height:1.1; }
.precio__cifra small{ display:block; font-size:14px; font-weight:400; color:var(--apagado); margin-top:3px; }
.precio__detalle{ margin:0; font-size:15px; color:var(--tinta-2); }
.precio__incluye{ margin:0; padding-left:18px; font-size:14.5px; color:var(--tinta-2); }
.precio__incluye li{ margin-bottom:4px; }
.precio__rondas{ font-size:13.5px; color:var(--apagado); }
.precio .boton{ margin-top:6px; }

/* ---------- Tambien hacemos ---------- */
.tambien{
  margin-top:22px; padding:18px 20px;
  background:var(--superficie-2); border-radius:var(--radio);
  font-size:15.5px; color:var(--tinta-2);
}
.tambien b{ color:var(--tinta); }
.tambien ul{ margin:10px 0 0; padding-left:18px; }
.tambien li{ margin-bottom:5px; }

/* ---------- Pasos ---------- */
.pasos{ display:grid; gap:18px; grid-template-columns:1fr; counter-reset:paso; }
@media (min-width:720px){ .pasos{ grid-template-columns:repeat(3,1fr); gap:26px; } }
.paso{ padding-top:14px; border-top:2px solid var(--acento); }
.paso h3{ margin:0 0 5px; font-size:19px; }
.paso h3::before{
  counter-increment:paso; content:counter(paso) ". ";
  color:var(--acento); font-weight:600;
}
.paso p{ margin:0; font-size:15.5px; color:var(--tinta-2); }

/* ---------- Muestra (galeria de trabajo real) ---------- */
.muestra{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:620px){ .muestra{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .muestra--3{ grid-template-columns:repeat(3,1fr); } }
.muestra figure{ margin:0; }
.muestra img, .muestra video{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--filete); border-radius:var(--radio);
  background:var(--superficie-2);
}
.muestra figcaption{ margin-top:7px; font-size:14px; color:var(--apagado); }

/* ---------- Preguntas ---------- */
.pregunta{ border-top:1px solid var(--filete); }
.pregunta:last-of-type{ border-bottom:1px solid var(--filete); }
.pregunta summary{
  cursor:pointer; padding:17px 34px 17px 0; position:relative;
  font-weight:600; font-size:16.5px; list-style:none;
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{
  content:"+"; position:absolute; right:4px; top:15px;
  font-size:23px; font-weight:400; color:var(--acento);
}
.pregunta[open] summary::after{ content:"\2212"; }
.pregunta p{ margin:0 0 17px; color:var(--tinta-2); font-size:15.5px; max-width:64ch; }

/* ---------- Cierre ---------- */
.cierre{
  background:var(--superficie); border:1px solid var(--filete);
  border-radius:var(--radio); padding:clamp(24px,5vw,44px);
  text-align:center;
}
.cierre h2{ margin:0 0 10px; font-size:clamp(26px,4.5vw,38px); }
.cierre p{ margin:0 0 22px; color:var(--tinta-2); }
.cierre .par-botones{ justify-content:center; }

/* ---------- Pie ---------- */
.pie{
  border-top:1px solid var(--filete);
  padding-block:30px 40px;
  font-size:14.5px; color:var(--apagado);
}
.pie__fila{ display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; }
.pie a{ color:var(--tinta-2); text-decoration:none; }
.pie a:hover{ color:var(--acento); }

/* ---------- Revelado ----------
   El contrato lo fija landing.js y no se puede cambiar de un solo lado: el
   estado OCULTO cuelga de .js-revelar en el <html>, que pone el script. Si
   el script no corre, esa clase no existe, nada se oculta y la pagina se ve
   entera. Escribirlo al reves (ocultar desde el CSS y revelar por JS) es lo
   que deja la pagina en blanco cuando el JS falla. */
[data-revelar]{ transition:opacity .5s ease, transform .5s ease; }
.js-revelar [data-revelar]{ opacity:0; transform:translateY(14px); }
.js-revelar [data-revelar][data-visible]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-revelar [data-revelar]{ opacity:1; transform:none; }
}

/* Deja aire abajo para que la burbuja del chat no tape el ultimo boton. */
body{ padding-bottom:78px; }
@media (min-width:641px){ body{ padding-bottom:0; } }