/* ================================================
   ADCS Sevilla — Hoja de estilos compartida
   Asociación de Doble Caña de Sevilla
   ================================================ */

/* ---- RESET & VARIABLES ---- */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --naranja:#FFAB60;
  --naranja-medio:#e8903a;      /* fondos y hover */
  --naranja-dark:#a14f00;       /* texto naranja sobre claro: 5,8:1 */
  --naranja-light:#fff4ea;
  --oboe:#4a9e6b;          /* VERDE del logo - color del OBOE */
  --oboe-light:#e8f5ee;
  --fagot:#3bbfcc;         /* AZUL del logo - color del FAGOT */
  --fagot-light:#e6f8fa;
  --texto:#1a1a1a;
  --gris:#666;
  --borde:#e8e8e8;
}
body{font-family:'Inter',sans-serif;color:var(--texto);background:#fff;display:flex;flex-direction:column;min-height:100vh}
a{text-decoration:none;color:inherit}

/* ---- UTILIDADES DE TEXTO ---- */
.txt-oboe{color:#2d7a4e;font-weight:600}
.txt-fagot{color:#0e6f79;font-weight:600}

/* ---- LOGO ---- */
.logo-svg{display:block}
.nav-logo-link{display:flex;align-items:center;gap:0.6rem;flex-shrink:0}
.logo-img{height:56px;width:auto;display:block}
.logo-img-footer{height:64px;width:auto;display:block}
@media(max-width:768px){.logo-img{height:48px}}

/* ---- NAV ---- */
nav.topnav{background:#fff;padding:0.85rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;border-bottom:1.5px solid var(--borde);flex-wrap:wrap;gap:1rem}
.nav-links{display:flex;gap:0.2rem 1rem;flex-wrap:wrap;align-items:center}
.nav-links a{color:var(--gris);font-size:0.8rem;padding:0.5rem 0;font-weight:600;letter-spacing:0.2px;transition:color .2s;text-transform:uppercase;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--naranja-dark)}
.nav-links a.active{position:relative}
.nav-links a.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--naranja);border-radius:2px}
.menu-toggle{display:none;min-width:44px;min-height:44px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--texto)}

/* ---- BREADCRUMB ---- */
.breadcrumb-bar{background:#fafafa;border-bottom:1px solid var(--borde);padding:0.75rem 2rem}
.breadcrumb{max-width:1100px;margin:0 auto;font-size:0.78rem;color:var(--gris);display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.breadcrumb a{color:var(--gris);transition:color .2s;display:inline-block;padding:0.45rem 0}
.breadcrumb a:hover{color:var(--naranja-dark)}
.breadcrumb .sep{color:#6f6f6f}
.breadcrumb .current{color:var(--texto);font-weight:600}

/* ---- PAGE HEADER ---- */
.page-header{background:#fff;padding:4rem 2rem 3rem;text-align:center;position:relative;overflow:hidden}
.page-header::before{content:'';position:absolute;top:-60px;right:-60px;width:280px;height:280px;border-radius:50%;background:var(--naranja-light);z-index:0}
.page-header::after{content:'';position:absolute;bottom:-40px;left:-40px;width:200px;height:200px;border-radius:50%;background:var(--fagot-light);z-index:0}
.page-header-inner{position:relative;z-index:1;max-width:700px;margin:0 auto}

/* ---- SECTION TAGS ---- */
.section-tag{display:inline-block;font-size:0.8rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:0.3rem 1rem;border-radius:999px;margin-bottom:1rem}
.tag-naranja{background:var(--naranja-light);color:var(--naranja-dark)}
.tag-oboe{background:var(--oboe-light);color:#2d6b47}
.tag-fagot{background:var(--fagot-light);color:#0e6f79}

/* ---- PAGE TITLE & SUBTITLE ---- */
.page-title{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,5vw,3.5rem);color:var(--texto);line-height:1.1;margin-bottom:1rem}
.page-title .accent{color:var(--naranja)}
.page-sub{color:var(--gris);font-size:1.05rem;line-height:1.75;max-width:580px;margin:0 auto}

/* ---- LAYOUT ---- */
main{flex:1}
section{padding:4rem 2rem}
.container{max-width:1100px;margin:0 auto}

/* ---- TÍTULOS DE SECCIÓN ---- */
.section-title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3.5vw,2.4rem);color:var(--texto);line-height:1.2;margin-bottom:1rem}
.section-title .accent{color:var(--naranja)}
.section-desc{color:var(--gris);font-size:1rem;line-height:1.75;max-width:700px}

/* ---- BOTONES ---- */
.btn-primary{background:var(--naranja);color:var(--texto);font-weight:600;font-size:0.9rem;padding:0.85rem 2rem;border-radius:999px;border:none;cursor:pointer;transition:transform .2s,background .2s;display:inline-block}
.btn-primary:hover{background:var(--naranja-medio);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--texto);font-weight:500;font-size:0.9rem;padding:0.85rem 2rem;border-radius:999px;border:1.5px solid var(--borde);cursor:pointer;transition:all .2s;display:inline-block}
.btn-outline:hover{border-color:var(--naranja);color:var(--naranja-dark)}
.btn-cta{display:inline-block;background:var(--naranja);color:var(--texto);font-weight:700;font-size:1rem;padding:1rem 2.5rem;border-radius:999px;transition:transform .2s,background .2s;letter-spacing:0.3px}
.btn-cta:hover{background:var(--naranja-medio);transform:translateY(-2px)}
.btn-cta-white{background:#fff;color:var(--naranja-dark);font-weight:700;font-size:0.95rem;padding:0.9rem 2.2rem;border-radius:999px;display:inline-block;transition:transform .2s}
.btn-cta-white:hover{transform:translateY(-2px)}

/* ---- IMG PLACEHOLDERS ---- */
.img-placeholder{
  background:linear-gradient(135deg,var(--naranja-light),var(--fagot-light));
  border:2px dashed rgba(0,0,0,0.12);
  border-radius:1.5rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--naranja-dark);text-align:center;padding:2rem;
  position:relative;overflow:hidden;
}
.img-placeholder .ph-icon{font-size:3rem;margin-bottom:0.75rem;opacity:0.6}
.img-placeholder .ph-label{font-size:0.9rem;font-weight:600;color:var(--naranja-dark)}
.img-placeholder .ph-hint{font-size:0.8rem;color:var(--gris);margin-top:0.4rem;opacity:0.7}

/* ---- ACCESIBILIDAD: foco visible por teclado ---- */
/* Contorno negro sobre fondo claro y blanco sobre el footer oscuro:
   ambos superan holgadamente 3:1, sin tocar los colores de marca. */
:focus-visible{outline:3px solid var(--texto);outline-offset:3px;border-radius:4px}
footer :focus-visible,.nota-legal :focus-visible,.socios-nav a.active:focus-visible{outline-color:#fff}

/* ---- ENLACE "SALTAR AL CONTENIDO" ---- */
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--texto);color:#fff;font-size:0.85rem;font-weight:600;padding:0.7rem 1.2rem;border-radius:0 0 0.6rem 0.6rem;transition:top .15s}
.skip-link:focus{top:0}

/* ---- RESPETAR "REDUCIR MOVIMIENTO" ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn-primary:hover,.btn-cta:hover,.btn-cta-white:hover,.btn-drive:hover,
  .acceso-card:hover,.participa-card:hover,.footer-social a:hover{transform:none}
}

/* ---- FOOTER ---- */
footer{background:#1a1a1a;color:#fff;padding:3rem 2rem 1.5rem;margin-top:auto}
.footer-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,0.1)}
.footer-brand .footer-logo-mark{margin-bottom:1rem}
.footer-brand p{color:rgba(255,255,255,0.55);font-size:0.85rem;line-height:1.7;max-width:340px}
.footer-col h2{font-size:0.78rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--naranja);margin-bottom:1rem;font-weight:600}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.2rem}
.footer-col a{color:rgba(255,255,255,0.6);font-size:0.85rem;display:inline-block;padding:0.3rem 0;transition:color .2s}
.footer-col a:hover{color:var(--naranja)}
.footer-social{display:flex;gap:0.7rem;margin-top:1rem}
.footer-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .2s;color:#fff}
.footer-social a:hover{background:var(--naranja);transform:translateY(-2px)}
.footer-bottom{max-width:1100px;margin:1.5rem auto 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.78rem;color:rgba(255,255,255,0.6)}
.footer-bottom .legal{display:flex;gap:0.8rem;flex-wrap:wrap}
.footer-bottom .legal a{color:rgba(255,255,255,0.5);display:inline-block;padding:0.5rem 0.2rem;transition:color .2s}
.footer-bottom .legal a:hover{color:var(--naranja)}
.footer-bottom .credits span{color:var(--naranja);font-weight:600}

/* ================================================
   ÁREA DE SOCIOS — componentes compartidos
   Usados en socios/index.html, actividades.html,
   archivo.html, documentacion.html, partituras.html,
   participa.html
   ================================================ */

/* ---- SUBNAV DE SECCIONES ---- */
.socios-nav{background:#fafafa;border-bottom:1px solid var(--borde);padding:1rem 2rem}
.socios-nav-inner{max-width:1100px;margin:0 auto;display:flex;gap:0.6rem;flex-wrap:wrap}
.socios-nav a{font-size:0.8rem;font-weight:600;color:var(--gris);padding:0.55rem 1.2rem;border-radius:999px;border:1.5px solid var(--borde);transition:all .2s;white-space:nowrap}
.socios-nav a:hover{border-color:var(--fagot);color:#0e6f79}
.socios-nav a.active{background:var(--fagot);border-color:var(--fagot);color:#fff}

/* ---- AVISO DE CONTENIDO DE EJEMPLO ---- */
.aviso-ejemplo{background:linear-gradient(90deg,var(--fagot-light),var(--naranja-light));border:1.5px solid var(--borde);border-radius:1rem;padding:1rem 1.5rem;display:flex;align-items:center;gap:0.75rem;font-size:0.85rem;color:var(--texto);margin-top:1.5rem;line-height:1.6}
.aviso-ejemplo strong{color:var(--naranja-dark)}

/* ---- ACCESOS RÁPIDOS (portada del área de socios) ---- */
.accesos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:2.5rem}
.acceso-card{background:#fff;border:1.5px solid var(--borde);border-radius:1.2rem;padding:2rem 1.75rem;transition:border-color .2s,transform .2s;display:block}
.acceso-card:hover{border-color:var(--fagot);transform:translateY(-3px)}
.acceso-icon{font-size:2rem;margin-bottom:0.85rem;opacity:0.85}
.acceso-card h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:0.4rem;color:var(--texto)}
.acceso-card p{color:var(--gris);font-size:0.87rem;line-height:1.6}

/* ---- NOVEDADES (portada) ---- */
.novedades-list{display:flex;flex-direction:column;gap:0.9rem;margin-top:2rem}
.novedad-item{display:flex;gap:1rem;align-items:baseline;background:#fff;border:1.5px solid var(--borde);border-radius:1rem;padding:1rem 1.4rem}
.novedad-item .novedad-fecha{font-size:0.8rem;font-weight:700;color:var(--naranja-dark);white-space:nowrap;text-transform:uppercase;letter-spacing:0.4px}
.novedad-item p{font-size:0.9rem;color:var(--texto);line-height:1.5}

/* ---- GRUPOS DE ACTIVIDAD / PERIODO ---- */
.actividad-group{padding-top:3rem}
.actividad-group:first-of-type{padding-top:0}
.actividad-group + .actividad-group{border-top:1px solid var(--borde);margin-top:1rem}

/* ---- FICHA DE EVENTO IMPORTANTE ---- */
.evento-card{background:#fff;border:1.5px solid var(--borde);border-radius:1.5rem;overflow:hidden;margin-top:2rem}
.evento-head{padding:2rem 2rem 0.5rem}
.evento-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:0.8rem;color:var(--gris);margin-bottom:0.6rem}
.evento-head h3{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--texto);margin-bottom:0.6rem;line-height:1.3}
.evento-head p{color:var(--gris);font-size:0.92rem;line-height:1.7}
.evento-sub{padding:0.5rem 2rem 2rem}
.evento-sub h4{font-size:0.8rem;text-transform:uppercase;letter-spacing:1px;color:#0e6f79;font-weight:700;margin:1.5rem 0 1rem}
.evento-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem}
.evento-video{border:1px solid var(--borde);border-radius:1rem;overflow:hidden;background:#fafafa}
.evento-video .video-wrap{position:relative;width:100%;padding-top:56.25%;background:linear-gradient(135deg,var(--fagot-light),var(--naranja-light))}
.evento-video .video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gris);gap:0.3rem;text-align:center;padding:0.5rem}
.evento-video .video-ph .ph-icon{font-size:1.6rem;opacity:0.6}
.evento-video .video-ph .ph-text{font-size:0.8rem;font-weight:600;opacity:0.75}
.evento-video-body{padding:0.85rem 1rem}
.evento-video-body .obra{font-size:0.85rem;font-weight:600;color:var(--texto);line-height:1.4}
.evento-video-body .interprete{font-size:0.78rem;color:var(--gris);margin-top:0.2rem}

/* ---- ACTIVIDAD LIGERA (clases, talleres pequeños) ---- */
.actividad-ligera{background:#fafafa;border:1px solid var(--borde);border-radius:1rem;padding:1.5rem 1.75rem;margin-top:1.25rem}
.actividad-ligera h4{font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--texto);margin-bottom:0.4rem}
.actividad-ligera p{color:var(--gris);font-size:0.88rem;line-height:1.65;margin-bottom:0.75rem}
.actividad-ligera .video-links{display:flex;flex-wrap:wrap;gap:0.6rem}
.actividad-ligera .video-links a{font-size:0.8rem;font-weight:600;color:#0e6f79;background:var(--fagot-light);padding:0.4rem 0.9rem;border-radius:999px;transition:all .2s}
.actividad-ligera .video-links a:hover{background:var(--fagot);color:#fff}

/* ---- BOTÓN DRIVE ---- */
.btn-drive{display:inline-flex;align-items:center;gap:0.7rem;background:linear-gradient(135deg,var(--oboe),#3d8c5f);color:#fff;font-weight:700;font-size:0.95rem;padding:0.9rem 1.8rem;border-radius:1rem;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 18px rgba(74,158,107,0.2);text-decoration:none}
.btn-drive:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(74,158,107,0.3)}

/* ---- LISTA DE DOCUMENTOS / PARTITURAS ---- */
.doc-list{display:flex;flex-direction:column;gap:0.9rem;margin-top:2rem}
.doc-item{display:flex;align-items:flex-start;gap:1rem;background:#fff;border:1.5px solid var(--borde);border-radius:1rem;padding:1.1rem 1.4rem;transition:border-color .2s;flex-wrap:wrap}
.doc-item:hover{border-color:var(--naranja)}
.doc-icon{width:44px;height:44px;border-radius:0.7rem;background:var(--naranja-light);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.doc-info{flex:1;min-width:180px}
.doc-info .doc-title{font-weight:600;font-size:0.95rem;color:var(--texto)}
.doc-info .doc-meta{font-size:0.78rem;color:var(--gris);margin-top:0.15rem}
.doc-info .doc-desc{font-size:0.85rem;color:var(--texto);opacity:0.85;margin-top:0.5rem;line-height:1.6}
.doc-item .doc-icon{margin-top:0.1rem}
.doc-item .doc-badge{margin-top:0.15rem}
.doc-badge{font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:0.3rem 0.7rem;border-radius:999px;white-space:nowrap}
.doc-badge.dominio-publico{background:var(--oboe-light);color:#2d6b47}
.doc-badge.material-propio{background:var(--fagot-light);color:#0e6f79}
.doc-badge.autorizado{background:var(--naranja-light);color:var(--naranja-dark)}
.doc-badge.pendiente{background:#f0f0f0;color:var(--gris)}
.doc-badge.proximamente{background:var(--naranja-light);color:var(--naranja-dark)}
.doc-item .doc-meta.por-confirmar{color:var(--naranja-dark);font-weight:600}
.doc-link{font-size:0.82rem;font-weight:600;color:var(--naranja-dark);white-space:nowrap}

/* ---- NOTA LEGAL ---- */
.nota-legal{background:var(--texto);color:rgba(255,255,255,0.85);border-radius:1.2rem;padding:1.75rem 2rem;margin-top:2.5rem;font-size:0.85rem;line-height:1.75}
.nota-legal strong{color:var(--naranja)}

/* ---- PARTICIPA ---- */
.participa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:2.5rem}
.participa-card{background:#fff;border:1.5px solid var(--borde);border-radius:1.2rem;padding:2rem 1.75rem;text-align:center;transition:border-color .2s,transform .2s}
.participa-card:hover{border-color:var(--fagot);transform:translateY(-3px)}
.participa-card .acceso-icon{margin-bottom:1rem}
.participa-card h2,.participa-card h3{font-family:'Playfair Display',serif;font-size:1.05rem;margin-bottom:0.5rem;color:var(--texto)}
.participa-card p{color:var(--gris);font-size:0.87rem;line-height:1.65;margin-bottom:1.25rem}

/* ---- RESPONSIVE ---- */
@media(max-width:1240px){
  .nav-links{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:0.2rem;padding:0.5rem 0 0}
  .nav-links.open{display:flex}
  .menu-toggle{display:block}
}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* ---- PÁGINAS LEGALES (aviso legal, privacidad, cookies) ---- */
.legal-doc{background:#fff;padding:1rem 2rem 4rem}
.legal-doc .container{max-width:820px}
.legal-doc h2{font-family:'Playfair Display',serif;font-size:1.45rem;color:var(--texto);margin:2.25rem 0 0.75rem;line-height:1.3}
.legal-doc h3{font-size:1.05rem;color:var(--texto);margin:1.5rem 0 0.5rem}
.legal-doc p,.legal-doc li{color:var(--gris);font-size:1rem;line-height:1.8}
.legal-doc p{margin-bottom:0.9rem}
.legal-doc ul{margin:0 0 1rem 1.25rem}
.legal-doc li{margin-bottom:0.4rem}
.legal-doc strong{color:var(--texto)}
.legal-doc a{color:var(--texto);text-decoration:underline}
.legal-doc .actualizado{margin-top:2rem;font-size:0.9rem}
.borrador-aviso{background:var(--naranja-light);border-left:4px solid var(--naranja);border-radius:0.6rem;padding:1rem 1.25rem;color:var(--texto)!important;font-size:0.95rem!important}
mark.pendiente{background:#fff3a3;color:var(--texto);padding:0.05em 0.35em;border-radius:0.25em}
.tabla-legal{width:100%;border-collapse:collapse;margin:0 0 1.25rem;font-size:0.95rem}
.tabla-legal th,.tabla-legal td{border:1px solid var(--borde);padding:0.65rem 0.85rem;text-align:left;vertical-align:top;color:var(--gris);line-height:1.6}
.tabla-legal th{background:var(--naranja-light);color:var(--texto)}
@media(max-width:600px){.legal-doc{padding:0.5rem 1.25rem 3rem}}

/* ---- IMPRESIÓN (CV, bases del concurso, páginas legales...) ---- */
@media print{
  @page{margin:1.6cm}
  body{background:#fff!important;color:#000!important;font-size:11pt}
  .skip-link,.topnav,.breadcrumb-bar,.menu-toggle,.footer-social,.footer-grid,.socios-nav,
  .btn-primary,.btn-outline,.btn-cta,.cta-note,.click-hint,.error-ctas{display:none!important}
  .page-header::before,.page-header::after,section::before,section::after{display:none!important}
  .page-header,section,.container,.legal-doc{padding-top:0.4cm!important;padding-bottom:0.4cm!important;background:#fff!important}
  *{box-shadow:none!important;animation:none!important;transition:none!important}
  a{color:#000!important;text-decoration:underline}
  main a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  a[href^="mailto"]:after,a[href^="#"]:after,.nav-logo-link:after{content:none}
  h1,h2,h3,h4{break-after:avoid-page}
  img,table,.legal-card,.evento-card,.participa-card{break-inside:avoid}
  footer{background:#fff!important;color:#000!important;padding:0.4cm 0!important;border-top:1px solid #999}
  footer *{color:#000!important}
  mark.pendiente{background:none;border-bottom:1px dotted #000}
}

/* ---- FOTOS ---- */
.foto-hueco{border-radius:1.5rem;overflow:hidden;position:relative;background:var(--naranja-light)}
.foto-hueco .foto{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.mision-photo .foto{display:block;width:100%;height:100%;object-fit:cover}