/* Charo Coromoto — base común (talleres y emprendimiento)
   Paleta y tipografía del formulario de marca (11/09/2026). Colores SOLO aquí. */
:root{
  --pergamino:#F5EFE4;
  --pergamino-hondo:#EBE2D2;
  --blanco-calido:#FBF8F2;
  --tinta:#2B2620;
  --tinta-suave:#4A4239;
  --oliva:#5E6B45;
  --oliva-hondo:#414A30;
  --arcilla:#9C4A30;
  --arcilla-viva:#B85F42;
  --rosa:#D3A79C;
  --verde-wa:#0E7A3E;
  --verde-wa-hover:#0B6633;
  --verde-wa-logo:#25D366;
  --error:#A3261B;
  --error-fondo:#FBE9E5;
  --linea:rgba(43,38,32,.18);
  --sombra:0 22px 48px -26px rgba(43,38,32,.45);

  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --texto:"Karla", "Helvetica Neue", Arial, sans-serif;

  --ancho:1180px;
  --radio:14px;
  --radio-peq:8px;
  --ola-h:clamp(56px, 8vw, 120px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{
  margin:0;background:var(--pergamino);color:var(--tinta);
  font-family:var(--texto);font-size:20px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.012em;margin:0;color:var(--oliva-hondo)}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:700;color:var(--tinta)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.4rem)}
p{margin:0 0 1em}
.env{width:min(100% - 2rem, var(--ancho));margin-inline:auto}
.env-estrecho{max-width:820px}
.seccion{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:1.2em;height:1.2em;flex:0 0 auto;display:inline-block;vertical-align:-.2em}

:where(a,button,input,summary,[tabindex]):focus-visible{outline:3px solid var(--arcilla);outline-offset:3px;border-radius:4px}

.saltar{position:absolute;left:1rem;top:-80px;z-index:200;background:var(--tinta);color:var(--pergamino);padding:.7rem 1.1rem;border-radius:var(--radio-peq);text-decoration:none;font-weight:700}
.saltar:focus{top:1rem}

.kicker{font-family:var(--texto);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--oliva);margin:0 0 .9rem}
.kicker-claro{color:#E8C9C0}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--texto);font-weight:700;font-size:1.05rem;line-height:1.2;
  min-height:56px;padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-peq{min-height:46px;padding:.55rem 1.15rem;font-size:.95rem}
.btn-arcilla{background:var(--arcilla);color:#fff}
.btn-arcilla:hover{background:#86402A}
.btn-linea{background:transparent;color:var(--tinta);border-color:rgba(43,38,32,.45)}
.btn-linea:hover{border-color:var(--oliva-hondo);background:rgba(94,107,69,.08)}
.btn-claro{background:var(--pergamino);color:var(--oliva-hondo)}
.btn-claro:hover{background:#fff}
.btn-linea-claro{background:transparent;color:var(--pergamino);border-color:rgba(245,239,228,.6)}
.btn-linea-claro:hover{border-color:var(--pergamino);background:rgba(245,239,228,.08)}

/* WhatsApp: verde oscuro (contraste AA con blanco) + logo ORIGINAL en su verde sobre círculo blanco */
.btn-wa{background:var(--verde-wa);color:#fff;border-color:var(--verde-wa)}
.btn-wa:hover{background:var(--verde-wa-hover);border-color:var(--verde-wa-hover)}
.wa-logo{display:inline-grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:#fff;flex:0 0 auto}
.wa-logo svg{width:1.45em;height:1.45em;color:var(--verde-wa-logo)}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:60;background:var(--pergamino);border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease}
.cab.fija{border-bottom-color:var(--linea);box-shadow:0 6px 18px -14px rgba(43,38,32,.5)}
.cab-fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;line-height:1;min-height:48px}
.marca .iso{width:38px;height:38px;flex:0 0 auto}
.marca .nombre{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.01em;color:var(--tinta);white-space:nowrap}
.marca .nombre em{font-style:normal;color:var(--oliva)}
.nav-esc{display:flex;align-items:center;gap:1.6rem}
.nav-esc a:not(.btn){text-decoration:none;font-size:1rem;font-weight:500;white-space:nowrap;padding:.6rem 0;position:relative}
.nav-esc a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:.3rem;height:2px;background:var(--oliva);transition:right .25s ease}
.nav-esc a:not(.btn):hover::after{right:0}
.cab-reservar{display:none}
.abrir-menu{display:none;background:none;border:2px solid var(--linea);border-radius:999px;font-family:var(--texto);font-weight:700;font-size:1rem;color:var(--tinta);cursor:pointer;align-items:center;gap:.55rem;min-height:46px;padding:.4rem .95rem}
.abrir-menu .barras{display:inline-block;width:20px;height:14px;position:relative}
.abrir-menu .barras i{position:absolute;left:0;right:0;height:2px;background:var(--tinta);border-radius:2px}
.abrir-menu .barras i:nth-child(1){top:0}.abrir-menu .barras i:nth-child(2){top:6px}.abrir-menu .barras i:nth-child(3){top:12px}

.panel{position:fixed;inset:0;z-index:90;background:var(--oliva-hondo);color:var(--pergamino);display:flex;flex-direction:column;padding:1.2rem 1.4rem 2.2rem;overflow-y:auto}
.panel[hidden]{display:none}
.panel-top{display:flex;justify-content:flex-end}
.cerrar-menu{background:transparent;border:2px solid rgba(245,239,228,.55);color:var(--pergamino);font-family:var(--texto);font-weight:700;font-size:1.05rem;min-height:50px;padding:.5rem 1.3rem;border-radius:999px;cursor:pointer}
.panel-nav{display:flex;flex-direction:column;margin-top:1.6rem}
.panel-nav a{font-family:var(--display);font-size:1.7rem;font-weight:600;text-decoration:none;color:var(--pergamino);padding:.75rem 0;border-bottom:1px solid rgba(245,239,228,.18)}
.panel .btn{margin-top:2rem;align-self:flex-start}

/* ---------- olas (la forma lleva el color de ARRIBA, el fondo es el de ABAJO) ---------- */
.ola{display:block;line-height:0;background:var(--a);margin-top:-1px}
.ola svg{display:block;width:100%;height:var(--ola-h)}
.ola path{fill:var(--de)}

/* ---------- acordeón ---------- */
.acordeon{margin-top:2rem;border-top:1px solid var(--linea)}
.acordeon details{border-bottom:1px solid var(--linea)}
.acordeon summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:64px;padding:1rem 0;font-weight:700;font-size:1.08rem}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"";flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:2px solid var(--oliva);background:linear-gradient(var(--oliva),var(--oliva)) center/12px 2px no-repeat,linear-gradient(var(--oliva),var(--oliva)) center/2px 12px no-repeat}
.acordeon details[open] summary::after{background:linear-gradient(var(--oliva),var(--oliva)) center/12px 2px no-repeat}
.acordeon .respuesta{padding:0 0 1.2rem;max-width:62ch;color:var(--tinta-suave)}
.acordeon .respuesta p:last-child{margin:0}
.acordeon .respuesta a{display:inline-flex;align-items:center;min-height:46px}

/* ---------- pie ---------- */
.pie{background:var(--tinta);color:rgba(245,239,228,.86);padding:2.6rem 0 1.6rem;font-size:.95rem}
.pie-rejilla{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;justify-content:space-between;align-items:center}
.pie-marca{display:flex;flex-direction:column;gap:.2rem}
.pie-nombre{font-family:var(--display);font-size:1.35rem;color:var(--pergamino)}
.pie-nombre em{font-style:normal;color:var(--rosa)}
.redes{display:flex;gap:.4rem}
.redes a{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;transition:background .2s ease}
.redes a:hover{background:rgba(245,239,228,.12)}
.redes svg{width:22px;height:22px}
.legal{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.legal a{display:inline-flex;align-items:center;min-height:48px;padding:.4rem 0;text-decoration:underline;text-underline-offset:3px}
.firma{margin:1.6rem auto 0;padding-top:1.2rem;border-top:1px solid rgba(245,239,228,.14);font-size:.88rem;color:rgba(245,239,228,.72)}
.firma a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:46px}

/* ---------- botón flotante de WhatsApp ---------- */
.flota{position:fixed;right:1rem;bottom:1rem;z-index:70;display:inline-flex;align-items:center;gap:.65rem;background:var(--verde-wa);color:#fff;text-decoration:none;font-weight:700;font-size:1rem;padding:.4rem 1.2rem .4rem .4rem;border-radius:999px;box-shadow:0 10px 26px -8px rgba(20,40,25,.55);transition:opacity .3s ease,transform .3s ease}
.flota:hover{background:var(--verde-wa-hover)}
.flota-foto{position:relative;width:48px;height:48px;flex:0 0 auto}
.flota-foto img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.flota-insignia{position:absolute;right:-5px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.flota-insignia svg{width:17px;height:17px;color:var(--verde-wa-logo)}
.flota.oculta{opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden}

/* ---------- revelado (visible por defecto; solo se oculta si hay JS) ---------- */
.js .rev{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .rev.visible{opacity:1;transform:none}
.js [data-entrada]{opacity:0;transform:translateY(14px);animation:entrar .7s ease forwards;animation-delay:calc(var(--i,0) * 120ms)}
@keyframes entrar{to{opacity:1;transform:none}}

/* ---------- página legal ---------- */
.legal-pag{padding:2.5rem 0 4rem}
.legal-pag h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:1rem}
.legal-pag h2{font-size:1.55rem;margin:2.4rem 0 .8rem;padding-top:.5rem}
.legal-pag p,.legal-pag li{max-width:68ch}
.legal-pag ul{padding-left:1.2rem}
.volver{margin:0 0 1.5rem}

@media (max-width:900px){
  .nav-esc{display:none}
  .cab-reservar{display:inline-flex;margin-left:auto}
  .abrir-menu{display:inline-flex}
}
@media (max-width:700px){
  body{font-size:19px}
  .marca .nombre{display:none}
  .cab-fila{min-height:66px;gap:.6rem}
  .flota{right:.75rem;bottom:.75rem}
  .pie{padding-bottom:6.5rem}
  .pie-rejilla{flex-direction:column;align-items:flex-start}
}
@media (max-width:360px){
  .flota-texto{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rev,.js [data-entrada]{opacity:1!important;transform:none!important}
}