/* Carrusel "coverflow": la foto central grande, las vecinas atras, mas chicas y en penumbra; el pie va debajo, centrado.
   Uso: <div class="cf" data-cf> ... (ver assets/coverflow.js). Colores: --cf-accent (por defecto el amarillo de la marca). */
.cf{ --cf-accent: var(--yellow, #FFE000); position:relative; padding:8px 0 0; }
.cf-stage{ position:relative; height:clamp(340px, 46vw, 560px); overflow:hidden; outline:none; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.cf-slide{ position:absolute; left:50%; top:0; height:100%; aspect-ratio:4/5; margin:0; overflow:hidden; background:#111; cursor:pointer;
  transform:translateX(-50%) scale(.6); opacity:0; filter:brightness(.3); transition:transform 1.05s cubic-bezier(.4,0,.2,1), opacity 1.05s ease, filter 1.05s ease; will-change:transform,opacity,filter; }
.cf-slide img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; }
.cf-slide.is-active{ cursor:default; box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }
.cf-caps{ position:relative; margin-top:26px; min-height:210px; text-align:center; }
.cf-cap{ position:absolute; left:0; right:0; top:0; padding:0 20px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease, visibility 0s linear .4s; }
.cf-cap.is-active{ opacity:1; visibility:visible; transform:none; transition:opacity .55s ease .2s, transform .55s ease .2s, visibility 0s; position:relative; }
.cf-tag{ font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--cf-accent); margin-bottom:12px; }
.cf-title{ font-size:clamp(24px,3.2vw,38px); line-height:1.12; margin-bottom:10px; }
.cf-quote{ font-size:14.5px; font-style:italic; opacity:.8; margin:0 auto 10px; max-width:520px; }
.cf-desc{ font-size:15.5px; line-height:1.65; max-width:520px; margin:0 auto 16px; opacity:.88; }
.cf-ui{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:10px; flex-wrap:wrap; }
.cf-dots{ display:flex; gap:8px; }
.cf-dot{ color:inherit; width:26px; height:3px; border:0; padding:0; background:currentColor; opacity:.25; cursor:pointer; transition:opacity .3s, background .3s; }
.cf-dot.is-active{ opacity:1; background:var(--cf-accent); }
.cf-btn{ width:42px; height:42px; border:1px solid currentColor; background:transparent; color:inherit; border-radius:50%; font-size:17px; cursor:pointer; opacity:.8; transition:opacity .25s, background .25s, color .25s; }
.cf-btn:hover{ opacity:1; background:var(--cf-accent); color:#111; border-color:var(--cf-accent); }
.cf-pause{ background:none; border:0; cursor:pointer; color:inherit; font:500 11px/1 -apple-system,"Helvetica Neue",Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:.75; display:inline-flex; align-items:center; gap:8px; padding:10px 0; }
.cf-pause:hover{ opacity:1; }
.cf-pause-ico{ width:11px; height:11px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.cf-pause[aria-pressed="true"] .cf-pause-ico{ border:0; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; width:0; height:0; }
@media (max-width:700px){ .cf-stage{ height:clamp(320px, 92vw, 440px); } .cf-caps{ min-height:230px; } .cf-btn{ display:none; } }
@media (prefers-reduced-motion: reduce){ .cf-slide, .cf-cap, .cf-cap.is-active{ transition:none; } }

/* Foto central: se puede ampliar */
.cf-slide.is-active{ cursor:zoom-in; }
.cf-slide.is-active::after{ content:'+'; position:absolute; right:12px; bottom:12px; width:36px; height:36px; border-radius:50%; background:rgba(15,13,10,.62); color:#fff; font:300 22px/36px -apple-system,"Helvetica Neue",Arial,sans-serif; text-align:center; backdrop-filter:blur(4px); transition:background .25s, transform .25s; pointer-events:none; }
.cf-slide.is-active:hover::after{ background:var(--cf-accent); color:#111; transform:scale(1.08); }
/* Ventana ampliada */
.cf-lb{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; background:rgba(10,9,7,.94); opacity:0; transition:opacity .22s ease; padding:24px; }
.cf-lb[hidden]{ display:none; }
.cf-lb.open{ opacity:1; }
.cf-lb-fig{ margin:0; text-align:center; max-width:min(94vw,1100px); }
.cf-lb-fig img{ max-width:100%; max-height:80vh; object-fit:contain; opacity:0; transform:scale(.97); transition:opacity .35s ease, transform .35s ease; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
.cf-lb-fig img.is-loaded{ opacity:1; transform:none; }
.cf-lb-fig figcaption{ margin-top:16px; color:#F5F1E8; font:500 13px/1.4 -apple-system,"Helvetica Neue",Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.cf-lb-x{ position:absolute; top:18px; right:22px; width:46px; height:46px; border:0; background:none; color:#F5F1E8; font-size:38px; line-height:1; cursor:pointer; opacity:.85; }
.cf-lb-x:hover{ opacity:1; }
.cf-lb-nav{ flex:none; width:46px; height:46px; margin:0 8px; border:1px solid rgba(245,241,232,.5); border-radius:50%; background:transparent; color:#F5F1E8; font-size:19px; cursor:pointer; transition:background .25s, color .25s; }
.cf-lb-nav:hover{ background:#FFE000; color:#111; border-color:#FFE000; }
@media (max-width:700px){ .cf-lb{ padding:12px; } .cf-lb-nav{ position:absolute; bottom:22px; margin:0; } .cf-lb-prev{ left:22px; } .cf-lb-next{ right:22px; } .cf-lb-fig img{ max-height:72vh; } }
@media (prefers-reduced-motion: reduce){ .cf-lb, .cf-lb-fig img{ transition:none; } }
