/* LA HERMANA MENOR — hoja de estilos, tokens reales del brandbook */

@font-face{font-family:"Aesthetic";src:url("fonts/Aesthetic-Regular.otf") format("opentype"),url("fonts/Aesthetic-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bristol";src:url("fonts/Bristol.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans";src:url("fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans";src:url("fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --pap:#f2ecd8; --stal:#f9f5ea; --ink:#231e19;
  --rojo:#8f0904; --tiger:#c73a1e; --oliva:#6d8341; --azul:#2c47b9;
  --sand:#d1c59d; --muted:#746b3e;
  --font-display:'Aesthetic',Georgia,serif;
  --font-hand:'Bristol','Comic Sans MS',cursive;
  --font-sans:'Noto Sans','Helvetica Neue',Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pap);color:var(--ink);font-family:var(--font-sans);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
img{max-width:100%;display:block}
::selection{background:var(--tiger);color:var(--pap)}
a{color:var(--rojo);text-decoration:none}
a:hover{color:var(--tiger)}
*:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.info{font-size:13px;letter-spacing:0.09em;text-transform:uppercase}
.hand{font-family:var(--font-hand)}

/* ---- tachado: mancha real del brandbook sobre la palabra ---- */
.tachado{position:relative;display:inline-block;white-space:nowrap}
.tachado img{position:absolute;left:-4%;top:50%;transform:translateY(-46%);width:108%;height:auto;pointer-events:none}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;font-family:var(--font-sans);font-size:13px;letter-spacing:0.09em;text-transform:uppercase;text-decoration:none;transition:transform .15s ease, opacity .15s ease;border:1px solid transparent;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--rojo);color:var(--pap)}
.btn-primary:hover{background:#800002;color:var(--pap)}
.btn-accent{background:var(--tiger);color:var(--pap)}
.btn-accent:hover{opacity:.9;color:var(--pap)}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--pap)}
.btn-outline-light{background:transparent;box-shadow:inset 0 0 0 1px rgba(242,236,216,0.5);color:var(--pap);border-color:transparent}
.btn-outline-light:hover{box-shadow:inset 0 0 0 1px var(--pap)}
.btn-quiet{background:transparent;color:var(--rojo);text-decoration:underline;height:auto;padding:0}

/* ---- foto placeholder (sin fotos de terceros sin licencia) ---- */
.photo-slot{position:relative;background:var(--sand);display:flex;align-items:flex-end;overflow:hidden}
.photo-slot .label{position:relative;z-index:1;margin:20px;padding:8px 12px;background:rgba(35,30,25,0.82);color:var(--pap);font-size:11px;letter-spacing:0.09em;text-transform:uppercase}
.photo-slot img.mark{position:absolute;opacity:0.5;pointer-events:none}

/* ---- mantel / cuadriculado de fondo ---- */
.mantel{position:relative;overflow:hidden}
.mantel::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to right,rgba(143,9,4,0.11) 0 60px,transparent 60px 120px),repeating-linear-gradient(to bottom,rgba(143,9,4,0.11) 0 60px,transparent 60px 120px)}
.mantel > .wrap{position:relative}

/* ---- form fields ---- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;letter-spacing:0.09em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font-family:var(--font-sans);font-size:1rem;padding:14px 16px;background:var(--stal);border:1px solid rgba(35,30,25,0.25);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--azul);outline-offset:1px}
.field textarea{resize:vertical;min-height:100px}
.radio-row{display:flex;flex-direction:column;gap:10px}
.radio-row label{display:flex;align-items:center;gap:10px;font-size:1rem;text-transform:none;letter-spacing:normal;color:var(--ink)}

/* ---- FAQ accordion (native details/summary) ---- */
.faq details{border-bottom:1px solid rgba(35,30,25,0.18);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-size:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--font-sans);font-size:1.5rem;color:var(--rojo);flex-shrink:0}
.faq details[open] summary::after{content:'–'}
.faq p{margin-top:14px;font-size:1rem;line-height:1.6;max-width:60ch}

@media (max-width:820px){
  .grid-2{grid-template-columns:1fr !important}
  .grid-3{grid-template-columns:1fr !important}
  nav.mainnav{display:none !important}
}