/*
Theme Name: AERCAN
Theme URI: https://www.aercan.com
Author: Asociacion Ecuatoriana de Registros Caninos
Description: Tema del sitio oficial de la AERCAN: exposiciones, ranking, razas FCI, jueces y reglamentos. Diseno adaptable.
Version: 1.1
Requires at least: 5.9
Tested up to: 6.6
License: GNU General Public License v2 or later
Text Domain: aercan
*/

/* ============================================================
   AERCAN - Asociación Ecuatoriana de Registros Caninos
   Hoja de estilos principal - Diseño adaptable (responsive)
   ============================================================ */

/* ---------- 1. Variables y reset ---------- */
:root{
  --azul:#0b2545;
  --azul-2:#13315c;
  --azul-3:#1b4477;
  --rojo:#c8102e;          /* rojo del logo AERCAN: acento principal */
  --rojo-oscuro:#9d0c23;
  --rojo-claro:#ff7080;    /* acento sobre fondos oscuros */
  --oro:#c9a227;           /* solo para el primer puesto del ranking */
  --crema:#f5f6f7;
  --blanco:#ffffff;
  --texto:#1f2430;
  --gris:#5f6672;
  --gris-claro:#e2e5e9;
  --verde:#1f7a5c;
  --radio:14px;
  --radio-sm:8px;
  --sombra:0 4px 18px rgba(11,37,69,.08);
  --sombra-alta:0 14px 40px rgba(11,37,69,.16);
  --ancho:1180px;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --trans:.25s ease;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--texto);
  background:var(--blanco);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--azul-3);text-decoration:none;transition:color var(--trans);}
a:hover{color:var(--rojo);}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.2;color:var(--azul);margin:0 0 .6em;}
h1{font-size:clamp(2rem,5vw,3.4rem);}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);}
h3{font-size:clamp(1.15rem,2.2vw,1.45rem);}
h4{font-size:1.05rem;}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.1em;padding-left:1.3em;}
li{margin-bottom:.45em;}
hr{border:0;border-top:1px solid var(--gris-claro);margin:2.5rem 0;}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:4px;}

/* ---------- 2. Utilidades de estructura ---------- */
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px;}
.seccion{padding:clamp(48px,7vw,86px) 0;}
.seccion--crema{background:var(--crema);}
.seccion--azul{background:var(--azul);color:#dfe6f0;}
.seccion--azul h2,.seccion--azul h3{color:var(--blanco);}
/* las tarjetas blancas dentro de una seccion oscura conservan su titulo oscuro */
.seccion--azul .tarjeta h2,.seccion--azul .tarjeta h3,.seccion--azul .tarjeta h4{color:var(--azul);}
.centrado{text-align:center;}
.limite{max-width:780px;margin-left:auto;margin-right:auto;}
.oculto{display:none !important;}

.encabezado-seccion{margin-bottom:2.4rem;}
.encabezado-seccion .antetitulo{
  display:inline-block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--rojo);margin-bottom:.6rem;
}
.encabezado-seccion p{color:var(--gris);max-width:720px;}
.seccion--azul .encabezado-seccion p{color:#b9c6d8;}

/* ---------- 3. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.7em;border-radius:100px;border:2px solid transparent;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.02em;
  cursor:pointer;transition:all var(--trans);text-align:center;
}
.btn--primario{background:var(--rojo);color:#fff;}
.btn--primario:hover{background:var(--rojo-oscuro);color:#fff;transform:translateY(-2px);box-shadow:var(--sombra-alta);}
.btn--azul{background:var(--azul);color:#fff;}
.btn--azul:hover{background:var(--azul-3);color:#fff;transform:translateY(-2px);}
.btn--linea{border-color:currentColor;color:var(--azul);background:transparent;}
.btn--linea:hover{background:var(--azul);color:#fff;border-color:var(--azul);}
.btn--claro{border:2px solid rgba(255,255,255,.55);color:#fff;background:transparent;}
.btn--claro:hover{background:#fff;color:var(--azul);}
.btn--pequeno{padding:.55em 1.1em;font-size:.85rem;}

/* ---------- 4. Barra de navegación ---------- */
.barra-superior{background:var(--azul);color:#c6d2e2;font-size:.82rem;}
.barra-superior .contenedor{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap;}
.barra-superior a{color:#c6d2e2;}
.barra-superior a:hover{color:var(--rojo-claro);}
.barra-superior .datos{display:flex;gap:18px;flex-wrap:wrap;}

.cabecera{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 2px 14px rgba(11,37,69,.08);}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px;}
.marca{display:flex;align-items:center;gap:12px;}
.marca__escudo{width:54px;height:54px;flex:0 0 auto;object-fit:contain;}
.marca__escudo--claro{background:#fff;border-radius:50%;padding:3px;}
.marca__texto strong{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--azul);line-height:1;}
.marca__texto span{display:block;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);margin-top:3px;}

.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.menu li{margin:0;}
.menu a{
  display:block;padding:.6em .85em;border-radius:var(--radio-sm);
  font-size:.93rem;font-weight:600;color:var(--azul);white-space:nowrap;
}
.menu a:hover{background:var(--crema);color:var(--azul-3);}
.menu a.activo{color:var(--rojo);}
.menu a.activo::after{content:"";display:block;height:3px;border-radius:3px;background:var(--rojo);margin-top:4px;}

.boton-menu{display:none;background:none;border:0;padding:8px;cursor:pointer;width:46px;height:46px;border-radius:var(--radio-sm);}
.boton-menu span{display:block;height:2.5px;width:26px;background:var(--azul);border-radius:2px;margin:5px auto;transition:all var(--trans);}
.boton-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.boton-menu[aria-expanded="true"] span:nth-child(2){opacity:0;}
.boton-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

@media (max-width:980px){
  .boton-menu{display:block;}
  .menu{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-top:1px solid var(--gris-claro);
    box-shadow:0 16px 30px rgba(11,37,69,.14);
    padding:10px 14px 20px;gap:0;
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility .3s;
  }
  .menu.abierto{max-height:80vh;overflow-y:auto;visibility:visible;}
  .menu a{padding:.9em .6em;border-bottom:1px solid var(--gris-claro);border-radius:0;font-size:1rem;}
  .menu a.activo::after{display:none;}
  .menu a.activo{background:var(--crema);}
}

@media (max-width:420px){
  .cabecera .contenedor{min-height:66px;}
  .marca__escudo{width:44px;height:44px;}
  .marca__texto strong{font-size:1.18rem;}
  .marca__texto span{font-size:.58rem;letter-spacing:.08em;}
  .barra-superior{font-size:.75rem;}
}

/* ---------- 5. Portada (hero) ---------- */
.portada{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(880px 460px at 92% -12%,rgba(200,16,46,.30),transparent 58%),
    linear-gradient(145deg,#070f19 0%,#0b2038 45%,#12293e 100%);
}
.portada::after{
  content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='60' cy='66' rx='13' ry='11'/%3E%3Cellipse cx='42' cy='48' rx='6' ry='8'/%3E%3Cellipse cx='58' cy='42' rx='6' ry='9'/%3E%3Cellipse cx='75' cy='47' rx='6' ry='8'/%3E%3Cellipse cx='86' cy='61' rx='5.5' ry='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size:190px;
}
.portada .contenedor{position:relative;z-index:2;}
.portada--grande{padding:clamp(70px,11vw,140px) 0;}
.portada--pagina{padding:clamp(52px,7vw,92px) 0;}
.portada h1{color:#fff;margin-bottom:.35em;}
.portada .bajada{font-size:clamp(1rem,1.9vw,1.24rem);color:#cbd8e9;max-width:660px;}
.portada--grande .acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:2rem;}
.portada .distintivo{
  display:inline-flex;align-items:center;gap:.6em;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:.45em 1.1em;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--rojo-claro);
  margin-bottom:1.4rem;
}
.miga{font-size:.85rem;color:#a9bad0;margin-bottom:1rem;}
.miga a{color:#a9bad0;}
.miga a:hover{color:var(--rojo-claro);}

/* ---------- 6. Rejillas y tarjetas ---------- */
.rejilla{display:grid;gap:24px;}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}

.tarjeta{
  background:#fff;border:1px solid var(--gris-claro);border-radius:var(--radio);
  padding:28px;box-shadow:var(--sombra);transition:transform var(--trans),box-shadow var(--trans);
  height:100%;display:flex;flex-direction:column;
}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);}
.tarjeta h3{margin-bottom:.5rem;}
.tarjeta p{color:var(--gris);font-size:.96rem;}
.tarjeta .pie{margin-top:auto;padding-top:14px;}
.tarjeta__icono{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--azul),var(--azul-3));color:var(--rojo-claro);
  margin-bottom:16px;
}
.tarjeta--enlace{text-decoration:none;color:inherit;}
.tarjeta--destacada{border-color:var(--rojo);border-width:2px;}

/* Tarjeta de grupo FCI */
.grupo__numero{font-family:var(--serif);font-size:3.2rem;line-height:1;color:var(--rojo);font-weight:700;}
.grupo__etiqueta{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);font-weight:700;}
.grupo ul{font-size:.9rem;color:var(--gris);padding-left:1.1em;margin-bottom:1rem;}

/* ---------- 7. Cifras destacadas ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;}
.cifra{text-align:center;padding:26px 16px;background:rgba(255,255,255,.06);border-radius:var(--radio);border:1px solid rgba(255,255,255,.12);}
.cifra strong{display:block;font-family:var(--serif);font-size:2.5rem;color:var(--rojo-claro);line-height:1;}
.cifra span{display:block;margin-top:8px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#b9c6d8;}

/* ---------- 8. Pestañas por años ---------- */
.pestanas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:6px;}
.pestanas__btn{
  padding:.6em 1.25em;border-radius:100px;border:1.5px solid var(--gris-claro);
  background:#fff;color:var(--azul);font-family:var(--sans);font-weight:700;font-size:.92rem;
  cursor:pointer;transition:all var(--trans);
}
.pestanas__btn:hover{border-color:var(--azul-3);color:var(--azul-3);}
.pestanas__btn[aria-selected="true"]{background:var(--azul);border-color:var(--azul);color:#fff;}
.panel[hidden]{display:none;}

@media (max-width:640px){
  .pestanas{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .pestanas__btn{flex:0 0 auto;}
}

/* ---------- 9. Tablas adaptables ---------- */
.tabla-envoltura{overflow-x:auto;border:1px solid var(--gris-claro);border-radius:var(--radio);background:#fff;}
.tabla-envoltura--plana{border:0;overflow-x:visible;}
table.tabla--datos{min-width:0;font-size:.92rem;}
table.tabla--ajustada{min-width:0;}
table.tabla--datos td{padding:10px 0;}
table.tabla{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px;}
table.tabla thead th{
  background:var(--azul);color:#fff;text-align:left;padding:14px 16px;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;white-space:nowrap;
}
table.tabla td{padding:13px 16px;border-bottom:1px solid var(--gris-claro);vertical-align:top;}
table.tabla tbody tr:nth-child(even){background:#fafbfc;}
table.tabla tbody tr:hover{background:#f2f6fb;}
table.tabla td strong{color:var(--azul);}
.posicion{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--crema);font-weight:700;color:var(--azul);font-size:.85rem;
}
.posicion--1{background:var(--oro);color:var(--azul);}
.posicion--2{background:#cfd6dd;}
.posicion--3{background:#e0b98a;}

@media (max-width:600px){
  table.tabla{min-width:0;}
  table.tabla thead{display:none;}
  table.tabla tr{display:block;border-bottom:2px solid var(--gris-claro);padding:10px 0;}
  table.tabla td{display:flex;justify-content:space-between;gap:14px;border:0;padding:7px 16px;text-align:right;}
  table.tabla td::before{
    content:attr(data-titulo);font-weight:700;color:var(--azul);text-align:left;
    font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;flex:0 0 42%;
  }
}

/* ---------- 10. Buscador / filtros ---------- */
.filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:26px;}
.campo-busqueda{position:relative;flex:1 1 260px;}
.campo-busqueda input{
  width:100%;padding:.85em 1em .85em 2.8em;border:1.5px solid var(--gris-claro);
  border-radius:100px;font-family:var(--sans);font-size:.96rem;background:#fff;color:var(--texto);
}
.campo-busqueda input:focus{border-color:var(--azul-3);outline:none;box-shadow:0 0 0 4px rgba(27,68,119,.1);}
.campo-busqueda::before{
  content:"";position:absolute;left:16px;top:50%;width:16px;height:16px;transform:translateY(-50%);
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6672' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
select.selector{
  padding:.85em 2.4em .85em 1.1em;border:1.5px solid var(--gris-claro);border-radius:100px;
  font-family:var(--sans);font-size:.95rem;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2545' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/14px no-repeat;
  appearance:none;-webkit-appearance:none;color:var(--azul);font-weight:600;cursor:pointer;
}
.sin-resultados{padding:30px;text-align:center;color:var(--gris);background:var(--crema);border-radius:var(--radio);}

/* ---------- 11. Etiquetas ---------- */
.etiqueta{
  display:inline-block;padding:.3em .8em;border-radius:100px;font-size:.72rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--crema);color:var(--azul);border:1px solid var(--gris-claro);
}
.etiqueta--destacada{background:rgba(200,16,46,.1);color:var(--rojo-oscuro);border-color:rgba(200,16,46,.32);}
.etiqueta--azul{background:rgba(27,68,119,.1);color:var(--azul-3);border-color:rgba(27,68,119,.25);}
.etiqueta--verde{background:rgba(31,122,92,.12);color:var(--verde);border-color:rgba(31,122,92,.3);}
.etiqueta--oro{background:rgba(201,162,39,.16);color:#8a6d10;border-color:rgba(201,162,39,.4);}
.etiquetas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}

/* ---------- 12. Acordeón ---------- */
.acordeon{border:1px solid var(--gris-claro);border-radius:var(--radio);overflow:hidden;background:#fff;}
.acordeon + .acordeon{margin-top:14px;}
.acordeon summary{
  padding:20px 56px 20px 22px;cursor:pointer;font-weight:700;color:var(--azul);
  position:relative;list-style:none;font-size:1.02rem;
}
.acordeon summary::-webkit-details-marker{display:none;}
.acordeon summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--rojo);font-weight:400;line-height:1;
}
.acordeon[open] summary::after{content:"\2013";}
.acordeon[open] summary{background:var(--crema);}
.acordeon__cuerpo{padding:6px 22px 22px;color:var(--gris);font-size:.96rem;}
.acordeon__cuerpo p:last-child,.acordeon__cuerpo ul:last-child{margin-bottom:0;}

/* ---------- 13. Agenda de eventos ---------- */
.evento{
  display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:start;
  background:#fff;border:1px solid var(--gris-claro);border-radius:var(--radio);
  padding:22px;box-shadow:var(--sombra);transition:transform var(--trans),box-shadow var(--trans);
}
.evento:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);}
.evento + .evento{margin-top:18px;}
.evento__fecha{
  background:linear-gradient(160deg,var(--azul),var(--azul-3));color:#fff;border-radius:var(--radio-sm);
  text-align:center;padding:14px 8px;
}
.evento__fecha .dia{display:block;font-family:var(--serif);font-size:2rem;line-height:1;}
.evento__fecha .mes{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin-top:5px;color:var(--rojo-claro);}
.evento__fecha .anio{display:block;font-size:.72rem;color:#b9c6d8;margin-top:3px;}
.evento h3{margin-bottom:.3rem;}
.evento .meta{font-size:.88rem;color:var(--gris);margin-bottom:.6rem;}
@media (max-width:520px){
  .evento{grid-template-columns:1fr;gap:14px;}
  .evento__fecha{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:10px;}
  .evento__fecha .dia{font-size:1.5rem;}
  .evento__fecha .mes,.evento__fecha .anio{margin-top:0;}
}

/* ---------- 14. Bloque de aviso ---------- */
.aviso{
  border-left:5px solid var(--rojo);background:var(--crema);
  padding:20px 24px;border-radius:0 var(--radio-sm) var(--radio-sm) 0;color:var(--gris);
}
.aviso strong{color:var(--azul);}
.aviso--azul{border-left-color:var(--azul-3);}

/* ---------- 15. Llamado a la acción ---------- */
.llamado{
  background:linear-gradient(135deg,var(--azul) 0%,var(--azul-3) 100%);
  color:#fff;border-radius:var(--radio);padding:clamp(34px,5vw,56px);text-align:center;
}
.llamado h2{color:#fff;}
.llamado p{color:#cbd8e9;max-width:620px;margin-left:auto;margin-right:auto;}
.llamado .acciones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:1.6rem;}

/* ---------- 16. Pie de página ---------- */
.pie-pagina{background:#081c34;color:#9fb1c8;padding:60px 0 0;font-size:.94rem;}
.pie-pagina h4{color:#fff;font-family:var(--sans);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem;}
.pie-pagina a{color:#9fb1c8;}
.pie-pagina a:hover{color:var(--rojo-claro);}
.pie-pagina ul{list-style:none;padding:0;}
.pie-pagina .rejilla{gap:34px;}
.pie-pagina .marca__texto strong{color:#fff;}
.pie-pagina .marca__texto span{color:#7f93ad;}
.pie-legal{
  border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding:20px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:#78899f;
}
.redes{display:flex;gap:10px;}
.redes a{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#cbd8e9;transition:all var(--trans);
}
.redes a:hover{background:var(--rojo);color:#fff;}

/* ---------- 17. Impresión ---------- */
@media print{
  .cabecera,.pie-pagina,.barra-superior,.boton-menu,.pestanas{display:none !important;}
  body{font-size:12pt;color:#000;}
  .panel[hidden]{display:block !important;}
}

/* ---------- 18. Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}
.salta-contenido{
  position:absolute;left:-9999px;background:var(--rojo);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 var(--radio-sm) 0;font-weight:700;
}
.salta-contenido:focus{left:0;top:0;}

/* ---------- 19. Ajustes propios de WordPress ---------- */
.admin-bar .cabecera{top:32px;}
@media (max-width:782px){.admin-bar .cabecera{top:46px;}}
#contenido > .wp-block-html{display:contents;}
.aercan-sitio{display:contents;}