/* Base común de las tres propuestas: colores, menú, pie y botón de WhatsApp */
:root{
  --blanco:#FFFFFF;
  --tinta:#1D1D1B;
  --gris:#6E6E73;
  --gris-claro:#A1A1A6;
  --linea:#E3E3E6;
  --banda:#F5F5F7;
  --rojo:#D50F1C;
  --rojo-hondo:#B00C17;
  --amarillo:#F8DA32;
  --ancho:1200px;
  --margen:clamp(20px,5vw,64px);
  --cabecera:56px;
  --suave:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--cabecera) + 16px)}
body{margin:0;background:var(--blanco);color:var(--tinta);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--amarillo);color:var(--tinta)}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:4px}
html{scrollbar-color:#c7c7cc var(--blanco)}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cabecera translúcida, como la barra de Apple */
.cabecera{position:sticky;top:0;z-index:50;height:var(--cabecera);background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(0,0,0,.06)}
.cabecera .envoltura{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1280px}
.marca{display:flex;align-items:center;text-decoration:none}
.marca img{height:30px;width:auto}
.menu{display:flex;gap:clamp(14px,1.8vw,28px);list-style:none;margin:0;padding:0}
.menu a{font-size:13px;letter-spacing:.01em;text-decoration:none;color:#333336;padding:6px 0;transition:color .2s}
.menu a:hover{color:var(--rojo)}
.menu a[aria-current="page"]{color:var(--tinta);font-weight:600}
.boton-menu{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;color:var(--tinta)}
.boton-menu svg{width:22px;height:22px}
@media (max-width:1000px){
  .menu{position:fixed;inset:var(--cabecera) 0 auto 0;flex-direction:column;gap:0;background:var(--blanco);padding:8px var(--margen) 28px;border-bottom:1px solid var(--linea);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s var(--suave),transform .3s var(--suave),visibility .3s}
  .menu a{display:block;font-size:24px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--linea)}
  .abierto .menu{opacity:1;transform:none;visibility:visible}
  .boton-menu{display:block}
}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 30px;border-radius:0;font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;border:0;background:none;position:relative;isolation:isolate;transition:transform .2s var(--suave)}
.boton::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fondo-boton,var(--tinta));transform:skewX(-12deg);transition:background .2s}
.boton:active{transform:scale(.97)}
.boton-rojo{--fondo-boton:var(--rojo);color:#fff}
.boton-rojo:hover{--fondo-boton:var(--rojo-hondo)}
.boton-amarillo{--fondo-boton:var(--amarillo);color:var(--tinta)}
.boton-amarillo:hover{--fondo-boton:#efcd16}
.boton-negro{--fondo-boton:var(--tinta);color:#fff}
.boton-negro:hover{--fondo-boton:#000}
.enlace{color:var(--rojo);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.enlace:hover{text-decoration:underline;text-underline-offset:4px}
.enlace svg{width:14px;height:14px;transition:transform .2s var(--suave)}
.enlace:hover svg{transform:translateX(3px)}

/* Esta semana (datos de ejemplo hasta conectar la agenda) */
.semana-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.semana-lista li{display:grid;grid-template-columns:130px 1fr auto;gap:8px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--linea)}
.semana-lista .cuando{font-weight:600;font-variant-numeric:tabular-nums}
.semana-lista .que{font-size:19px}
.semana-lista .que small{display:block;color:var(--gris);font-size:15px}
.semana-lista .hora{font-variant-numeric:tabular-nums;font-weight:600}
@media (max-width:640px){.semana-lista li{grid-template-columns:1fr auto}.semana-lista .cuando{grid-column:1/-1}}
.aviso-ejemplo{font-size:13px;color:var(--gris);margin-top:12px}

/* Pie */
.pie{margin-top:clamp(64px,10vw,140px);background:var(--banda);color:#424245;font-size:15px}
.pie .envoltura{padding-top:48px;padding-bottom:40px;max-width:1280px}
.pie-arriba{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-bottom:32px;border-bottom:1px solid #d2d2d7}
.pie-escudos{display:flex;align-items:center;gap:22px}
.pie-escudos img{height:58px;width:auto}
.pie-escudos .logo-asidra{height:38px}
.pie nav ul{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.pie nav a{text-decoration:none;line-height:2}
.pie nav a:hover{color:var(--rojo)}
.pie-abajo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:20px;color:#424245}
.incidencia{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--tinta);text-decoration:none}
.incidencia svg{width:16px;height:16px;color:var(--rojo)}
.incidencia:hover{color:var(--rojo)}

/* WhatsApp flotante */
.whatsapp{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:60;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 16px;border-radius:999px;background:var(--tinta);color:#fff;text-decoration:none;font-weight:600;font-size:15px;box-shadow:0 12px 32px -10px rgba(0,0,0,.45);transition:transform .25s var(--suave),background .2s}
.whatsapp:hover{transform:translateY(-2px);background:#000}
.whatsapp svg{width:26px;height:26px;color:#25D366;flex:none}
@media (max-width:640px){.whatsapp span{display:none}.whatsapp{padding:0;width:56px;justify-content:center}}

/* Aparición al hacer scroll: visible por defecto, se anima solo si hay JS */
.js .aparece{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--suave),transform .9s var(--suave),filter .9s var(--suave)}
.js .aparece.visto{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .js .aparece{opacity:1;transform:none;filter:none;transition:none}
  *{animation:none!important;scroll-behavior:auto!important}
}

@media (max-width:640px){.pie{padding-bottom:96px}}