/* ══════════════════════════════════════════════════════════════════
   TOKENS · The Portrait Atelier
   Vocabulario unico del sistema. Los estilos siguen viviendo inline
   por decision del proyecto (un solo archivo, sin build). Estas
   variables son la FUENTE DE VERDAD: al editar o agregar cualquier
   bloque, tomar el valor de aqui y no inventar uno nuevo.
   Todos los tonos de texto cumplen WCAG AA (>=4.5:1) sobre los
   cremas del sistema. Verificado el 24 ago 2026.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* — Tinta (texto). Contraste minimo sobre crema entre parentesis — */
  --tinta:            #241A10;  /* titulos y cuerpo             (13.9) */
  --tinta-cuerpo:     #4A3826;  /* parrafos largos               (8.2) */
  --tinta-suave:      #5B4836;  /* cuerpo secundario             (6.4) */
  --tinta-apoyo:      #705B4A;  /* pies de foto, meta            (4.6) */
  --acento:           #765B28;  /* dorado tipografico            (4.6) */
  --acento-verde:     #506623;  /* numeracion N.º, FAQ           (4.6) */

  /* — Superficie (fondos) — */
  --sup:              #F2EADC;  /* base                                */
  --sup-alta:         #F9F3E6;  /* panel elevado                       */
  --sup-media:        #EFE5D2;  /* panel                               */
  --sup-baja:         #E9DCC5;  /* panel hundido                       */
  --sup-honda:        #E7D9BD;  /* panel mas hundido                   */
  --sup-oscura:       #291D13;  /* seccion invertida                   */
  --sup-verde:        #465229;  /* seccion Grupos                      */

  /* — Marca (rellenos, nunca texto sobre crema) — */
  --oro:              #C9A45C;  /* relleno de boton primario           */
  --oro-hover:        #B08A35;
  --oro-sobre:        #231810;  /* texto sobre oro              (7.4)  */

  /* — Filetes — */
  --filete:           rgba(112,91,74,.16);
  --filete-medio:     rgba(112,91,74,.24);
  --filete-fuerte:    rgba(112,91,74,.5);

  /* — Tipografia — */
  --display: 'Big Shoulders Display', 'Archivo Narrow', Arial, sans-serif;
  --texto:   'Archivo', Arial, sans-serif;
  --track-titulo: .02em;   /* titulos display                         */
  --track-eyebrow: .24em;  /* antetitulo en versalitas                */
  --track-boton:  .16em;   /* etiquetas de boton                      */
  --track-meta:   .17em;   /* pies de foto                            */

  /* — Escala de boton. Tres pasos, no mas — */
  --btn-sm: 12px 20px;     /* nav, barra fija                         */
  --btn-md: 14px 24px;     /* dentro de secciones y tarjetas          */
  --btn-lg: 16px 30px;     /* hero y cierre                           */

  /* — Movimiento — */
  --trans: .3s ease;       /* toda interaccion de color/fondo         */
  --trans-pieza: .7s cubic-bezier(.16,.7,.2,1);

  /* — Forma — */
  --radio: 0;              /* el sistema es de esquina viva. Sin
                              excepciones salvo utilidades circulares. */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#F2EADC;color:#241A10;font-family:'Archivo',Arial,sans-serif;font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:#765B28;text-decoration:none}
a:hover{color:#6E521F}
:focus-visible{outline:2px solid #765B28;outline-offset:4px}
::selection{background:rgba(112,91,74,.25)}
html.at-anim [data-anim]{transition-property:opacity,transform,filter}
[data-pieza]{transition:transform .7s cubic-bezier(.16,.7,.2,1),box-shadow .7s cubic-bezier(.16,.7,.2,1)}
[data-pieza]:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 48px 80px -36px rgba(0,0,0,.9)!important}
[data-pieza] img{transition:transform 1.6s cubic-bezier(.16,.7,.2,1)}
[data-pieza]:hover img{transform:scale(1.05)}
@keyframes atMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
[data-plx]{will-change:transform}
@media (max-width:940px){[data-coleccion]{flex:1 1 100%!important}}
#navmovil{display:none}
#navmovil summary{list-style:none;cursor:pointer}
#navmovil summary::-webkit-details-marker{display:none}
@media (max-width:900px){#navlinks{display:none!important}#navmovil{display:block!important}}
details[data-faq] summary{list-style:none;cursor:pointer}
details[data-faq] summary::-webkit-details-marker{display:none}
details[data-faq] summary span[data-cruz]{transition:transform .3s ease}
details[data-faq][open] summary span[data-cruz]{transform:rotate(45deg)}
@keyframes atLuz{0%{opacity:0}100%{opacity:1}}
@keyframes atPieza{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-pieza]{transition:none}
  [data-pieza]:hover{transform:none}
  html.at-anim [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important}
}

/* estados que en HTML plano no pueden ir en el atributo style */
#saltar{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#saltar:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;z-index:200;background:#C9A45C;color:#231810;padding:10px 16px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;overflow:visible}
a[style*="background:#C9A45C"]:hover,button[style*="background:#C9A45C"]:hover{background:#B08A35!important;transform:translateY(-1px)}
a[style*="background:#F1E7D7"]:hover{background:#FFFCF2!important;transform:translateY(-1px)}
a[style*="border:1px solid rgba(112,91,74,.45)"]:hover,
a[style*="border:1px solid rgba(112,91,74,.5)"]:hover{background:#765B28!important;color:#F7F0E2!important}
a[style*="border:1px solid rgba(201,164,92,.45)"]:hover,
a[style*="border:1px solid rgba(201,164,92,.5)"]:hover{background:#C9A45C!important;color:#1F160F!important}
a[style*="border-bottom:1px solid rgba(112,91,74"]:hover{color:#241A10!important;border-color:#765B28!important}
#navlinks a:hover{color:#765B28!important}
#tipos a[href^="#"]:hover span:nth-child(2){color:#6E521F}
#wa-flotante:hover{background:#D8B473!important;transform:translateY(-3px)}
@media (prefers-reduced-motion: reduce){#wa-flotante{transition:none}#wa-flotante:hover{transform:none}}

/* ══════════════════════════════════════════════════════════════════
   CAPA DE COMPONENTES · mini landings de pauta
   La pagina principal conserva sus estilos inline. Las verticales
   (/individual /familiar /quimica /producto /grupos) usan estas
   clases. Todo sale de los tokens de :root, sin valores sueltos.
   ══════════════════════════════════════════════════════════════════ */
.at-wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4.5vw,48px)}
.at-sec{padding:clamp(52px,7.5vw,104px) 0}
.at-sec--alta{background:var(--sup-alta)}
.at-sec--baja{background:var(--sup-baja)}
.at-sec--oscura{background:var(--sup-oscura);color:#F1E7D7}

/* — Barra superior minima. Sin menu: es embudo cerrado — */
.at-top{position:sticky;top:0;z-index:80;background:rgba(242,234,220,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--filete)}
.at-top .at-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:11px;padding-bottom:11px}
.at-sec--oscura .at-eyebrow{color:var(--oro)}
.at-sec--oscura .at-lead,.at-sec--oscura .at-lista li{color:#D3C2A8}

/* — Tipografia — */
.at-eyebrow{margin:0;font-family:var(--display);font-weight:600;font-size:14.5px;
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--acento)}
.at-h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  margin:clamp(18px,2.4vw,28px) 0 0;font-size:clamp(34px,5.2vw,68px);line-height:.98;
  letter-spacing:var(--track-titulo);max-width:16ch;text-wrap:balance;color:var(--tinta)}
.at-h1 em{display:block;color:var(--acento);font-style:italic}
.at-h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  margin:clamp(16px,2.2vw,24px) 0 0;font-size:clamp(28px,4.2vw,50px);line-height:1.02;
  letter-spacing:var(--track-titulo);max-width:20ch;text-wrap:balance;color:var(--tinta)}
.at-sec--oscura .at-h2{color:#F1E7D7}
.at-lead{margin:clamp(16px,2.2vw,24px) 0 0;max-width:52ch;color:var(--tinta-cuerpo);
  font-size:clamp(17px,1.35vw,19px);line-height:1.72;text-wrap:pretty}
.at-nota{margin:14px 0 0;font-family:var(--texto);font-size:12px;
  letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--tinta-apoyo)}

/* — Botones. Tres pasos, ni uno mas — */
.at-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:700;font-size:15px;background:var(--oro);color:var(--oro-sobre);
  padding:var(--btn-md);letter-spacing:var(--track-boton);text-transform:uppercase;
  border:0;cursor:pointer;transition:background var(--trans),transform var(--trans)}
.at-btn:hover{background:var(--oro-hover);color:var(--oro-sobre);transform:translateY(-1px)}
.at-btn--lg{padding:var(--btn-lg)}
.at-btn--sm{padding:var(--btn-sm)}
.at-btn--fantasma{background:transparent;color:var(--acento);
  border:1px solid var(--filete-fuerte);font-weight:600;font-size:14px}
.at-btn--fantasma:hover{background:var(--acento);color:var(--sup);border-color:var(--acento)}
.at-sec--oscura .at-btn--fantasma{color:var(--oro);border-color:rgba(201,164,92,.5)}
.at-sec--oscura .at-btn--fantasma:hover{background:var(--oro);color:var(--oro-sobre)}
.at-ctas{display:flex;gap:clamp(12px,1.8vw,18px);flex-wrap:wrap;align-items:center;margin-top:clamp(24px,3.2vw,34px)}

/* — Precio — */
.at-precio{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(38px,5.4vw,62px);line-height:1;color:var(--acento);letter-spacing:var(--track-titulo)}
.at-precio-pie{margin-top:7px;font-family:var(--texto);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-apoyo)}

/* — Rejillas y listas — */
.at-cols{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;align-items:center}
.at-col{flex:1 1 340px;min-width:0}
.at-lista{margin:clamp(20px,2.6vw,28px) 0 0;padding:0;list-style:none;display:grid;gap:0}
.at-lista li{color:var(--tinta-suave);font-size:16px;line-height:1.6;
  padding:13px 0;border-top:1px solid var(--filete-medio)}
.at-lista li:last-child{border-bottom:1px solid var(--filete-medio)}
.at-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(18px,2.6vw,28px);margin-top:clamp(28px,3.6vw,44px)}

/* — Tarjeta de coleccion — */
.at-card{background:var(--sup-alta);border:1px solid var(--filete-medio);
  padding:clamp(22px,2.8vw,32px);display:flex;flex-direction:column}
.at-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  margin:10px 0 0;font-size:clamp(26px,3vw,36px);line-height:1;color:var(--tinta);letter-spacing:var(--track-titulo)}
.at-card p{color:var(--tinta-suave);font-size:15.5px;line-height:1.65;margin:14px 0 0}
.at-dl{margin:18px 0 0;padding:0;font-size:14px}
.at-dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--filete)}
.at-dl dt{color:var(--tinta-apoyo);font-family:var(--texto);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.at-dl dd{margin:0;color:var(--tinta);font-weight:500}
.at-card .at-precio{font-size:clamp(30px,3.6vw,42px);margin-top:18px}
.at-card .at-btn{margin-top:18px;align-self:flex-start}

/* — Figuras — */
.at-fig{margin:0}
.at-fig .at-marco{border:1px solid var(--filete-medio);overflow:hidden;background:var(--sup-honda)}
.at-fig img{width:100%;height:100%;object-fit:cover}
.at-fig figcaption{margin-top:11px;font-family:var(--texto);font-size:10.5px;
  letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--tinta-apoyo)}
.at-r32 .at-marco{aspect-ratio:3/2}
.at-r45 .at-marco{aspect-ratio:4/5}
.at-r34 .at-marco{aspect-ratio:3/4}

/* — FAQ — */
.at-faq{border-top:1px solid rgba(80,102,35,.4)}
.at-faq:last-of-type{border-bottom:1px solid rgba(80,102,35,.4)}
.at-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  gap:18px;align-items:baseline;padding:20px 0;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(18px,1.9vw,23px);line-height:1.2;color:var(--tinta);letter-spacing:var(--track-titulo)}
.at-faq summary::-webkit-details-marker{display:none}
.at-faq summary span{font-family:var(--texto);font-size:20px;color:var(--acento-verde);flex:none;transition:transform var(--trans)}
.at-faq[open] summary span{transform:rotate(45deg)}
.at-faq p{margin:0 0 20px;color:var(--tinta-suave);font-size:16px;line-height:1.7;max-width:62ch}

/* — Formulario — */
.at-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(16px,2.2vw,24px);margin-top:clamp(26px,3.4vw,38px);text-align:left}
.at-form label{display:block;font-family:var(--texto);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-apoyo);margin-bottom:8px}
.at-form input,.at-form select,.at-form textarea{width:100%;font-family:var(--texto);
  font-size:16px;color:var(--tinta);background:var(--sup-alta);
  border:1px solid var(--filete-medio);padding:13px 14px;border-radius:var(--radio)}
.at-form input:focus,.at-form select:focus,.at-form textarea:focus{outline:2px solid var(--acento);outline-offset:1px}
.at-form .at-ancho{grid-column:1/-1}

/* — Pie y barra fija — */
.at-pie{border-top:1px solid var(--filete);padding:clamp(26px,4vw,38px) 0 clamp(92px,10vw,110px)}
.at-pie .at-wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
  align-items:center;font-family:var(--texto);font-size:13px;color:var(--tinta-apoyo)}
.at-otras{display:flex;gap:14px;flex-wrap:wrap}
.at-otras a{color:var(--tinta-apoyo);border-bottom:1px solid var(--filete-fuerte);padding-bottom:2px}
.at-otras a:hover{color:var(--acento)}

/* — Logo. El PNG es blanco puro: se usa como mascara y se pinta con tinta — */
.at-logo{display:block;height:clamp(26px,3.2vw,34px);aspect-ratio:5.223;flex:none;
  min-width:0;max-width:50vw;background:var(--tinta);
  -webkit-mask:url(../assets/logo-atelier.png) left center/contain no-repeat;
  mask:url(../assets/logo-atelier.png) left center/contain no-repeat}

/* ══════════════════════════════════════════════════════════════════
   CAPA EDITORIAL · el lenguaje de la pagina principal, en las
   verticales: telon desenfocado, indice numerado, pieza enmarcada,
   cinta, pasos y franja de datos.
   ══════════════════════════════════════════════════════════════════ */

/* — Hero con telon — */
.at-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--filete);
  padding:clamp(38px,5.5vw,84px) 0 clamp(46px,6vw,92px)}
.at-hero > .at-wrap{position:relative}
.at-telon,.at-luz,.at-velo{position:absolute;inset:0}
.at-telon{background:url(../assets/telon.jpg) center 30%/cover no-repeat;
  filter:blur(14px) saturate(.85) brightness(.95);transform:scale(1.2)}
.at-luz{animation:atLuz 2.6s ease both;background:radial-gradient(120% 90% at 18% -10%,
  rgba(255,252,244,.55) 0%,rgba(242,234,220,.32) 34%,rgba(242,234,220,.85) 72%,#F2EADC 100%)}
.at-velo{background:linear-gradient(180deg,rgba(242,234,220,.5) 0%,rgba(242,234,220,0) 26%,
  rgba(242,234,220,.55) 82%,#F2EADC 100%)}

/* — Indice de seccion: filete, rotulo y numero romano — */
.at-indice{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1px solid rgba(80,102,35,.5);padding-top:12px;margin-bottom:clamp(20px,2.8vw,32px)}
.at-indice .at-num{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:15px;color:var(--acento-verde);flex:none}
.at-sec--oscura .at-indice{border-color:rgba(201,164,92,.4)}
.at-sec--oscura .at-indice .at-num{color:var(--oro)}

/* — Pieza enmarcada, como el retrato del hero de la principal — */
.at-pieza{background:#E9DCC5;padding:clamp(13px,1.9vw,24px);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.85),0 2px 0 rgba(241,231,215,.07)}
.at-pieza .at-marco{border:1px solid rgba(35,24,16,.4)}
.at-entra{animation:atPieza 1.8s cubic-bezier(.16,.7,.2,1) .3s both}
.at-fig--pieza figcaption{padding-top:11px;border-top:1px solid var(--filete-medio);line-height:1.8}

/* — Cinta con los datos duros — */
.at-cinta{overflow:hidden;border-top:1px solid var(--filete-medio);
  border-bottom:1px solid var(--filete-medio);background:var(--sup-alta);padding:13px 0}
.at-cinta-pista{display:flex;width:max-content;animation:atMarquee 42s linear infinite}
.at-cinta-pista span{display:flex;gap:30px;padding-right:30px;font-family:var(--display);
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(13.5px,1.5vw,16px);color:var(--acento);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.at-cinta-pista{animation:none}}

/* — Pasos numerados — */
.at-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  gap:clamp(20px,2.8vw,34px);margin-top:clamp(26px,3.4vw,42px)}
.at-paso{border-top:1px solid rgba(80,102,35,.4);padding-top:18px}
.at-paso b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(30px,3.2vw,42px);line-height:1;color:var(--acento-verde);margin-bottom:11px}
.at-paso p{margin:0;color:var(--tinta-suave);font-size:15.5px;line-height:1.65}
.at-sec--oscura .at-paso{border-color:rgba(201,164,92,.35)}
.at-sec--oscura .at-paso b{color:var(--oro)}
.at-sec--oscura .at-paso p{color:#D3C2A8}

/* — Franja de datos duros — */
.at-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:clamp(16px,2.4vw,30px);margin-top:clamp(24px,3.2vw,38px)}
.at-dato{border-top:1px solid var(--filete-medio);padding-top:13px}
.at-dato b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(23px,2.5vw,33px);line-height:1;color:var(--tinta);letter-spacing:var(--track-titulo)}
.at-dato span{display:block;margin-top:7px;font-family:var(--texto);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-apoyo)}
.at-sec--oscura .at-dato{border-color:rgba(201,164,92,.3)}
.at-sec--oscura .at-dato b{color:#F1E7D7}
.at-sec--oscura .at-dato span{color:#A6907A}

/* — Enlaces de salto bajo el hero — */
.at-saltos{display:flex;flex-direction:column;gap:7px;margin-top:clamp(18px,2.4vw,24px);
  font-family:var(--texto);font-size:14px;letter-spacing:.04em}
.at-saltos a{align-self:flex-start;color:var(--tinta-cuerpo);
  border-bottom:1px solid var(--filete-fuerte);padding-bottom:2px}
.at-saltos a:hover{color:var(--acento)}

/* — Cita / argumento en seccion invertida — */
.at-cita{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3.8vw,46px);line-height:1.04;letter-spacing:var(--track-titulo);
  color:#F1E7D7;margin:0;max-width:22ch;text-wrap:balance}
.at-cita em{color:var(--oro);font-style:italic}

/* — Mosaico de archivo. Rejilla de piezas con pie propio — */
.at-mosaico{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:clamp(16px,2.2vw,26px);margin-top:clamp(26px,3.4vw,42px)}
.at-mosaico .at-fig{margin:0}
.at-mosaico .at-marco{border:1px solid var(--filete-medio);overflow:hidden;
  background:var(--sup-honda);aspect-ratio:3/2}
.at-mosaico figcaption{margin-top:9px;font-size:10px;letter-spacing:.16em}
.at-mosaico .at-ancha{grid-column:span 2}
@media (max-width:620px){.at-mosaico .at-ancha{grid-column:span 1}}
.at-sec--oscura .at-mosaico .at-marco{border-color:rgba(201,164,92,.3);background:#1B140D}
.at-sec--oscura .at-mosaico figcaption{color:#A6907A}