/* ============================================================
   VISTA PÚBLICA - Modos de imagen para candidatas
   ============================================================ */
.voto .foto-escenario{
  height:420px;
  padding:0;
  overflow:hidden;
  border-radius:16px;
  position:relative;
  /* Degradado principal del sitio para zonas vacías (letterboxing) */
  background:
    radial-gradient(ellipse at 25% 15%, rgba(189,142,81,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(140,72,136,0.25) 0%, transparent 55%),
    linear-gradient(145deg, #F0E8E0 0%, #F5EDE8 35%, #FDF3E8 65%, #FFFDF8 100%);
  box-shadow:
    0 20px 40px rgba(140,72,136,0.2),
    0 0 0 1px rgba(189,142,81,0.18),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(140,72,136,0.1);
}

/* Marco decorativo elegante - doble borde con bisel */
.voto .foto-escenario::before{
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:2;
  border-radius:16px;
  border:1px solid rgba(189,142,81,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(140,72,136,0.2),
    0 0 0 1px rgba(189,142,81,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 8%),
    linear-gradient(0deg, rgba(189,142,81,0.05) 0%, transparent 6%);
  opacity:0; transition:opacity 0.3s ease;
}

.voto .foto-escenario:hover::before{opacity:1}

/* Esquinas ornamentadas (marco clásico) */
.voto .foto-escenario::after{
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:3;
  border-radius:16px;
  background:
    /* Esquina sup-izq */
    radial-gradient(ellipse 24px 24px at 0 0, transparent 70%, rgba(189,142,81,0.4) 72%, transparent 74%) 0 0,
    radial-gradient(ellipse 18px 18px at 0 0, transparent 70%, rgba(189,142,81,0.6) 72%, transparent 74%) 0 0,
    /* Esquina sup-der */
    radial-gradient(ellipse 24px 24px at 100% 0, transparent 70%, rgba(189,142,81,0.4) 72%, transparent 74%) 100% 0,
    radial-gradient(ellipse 18px 18px at 100% 0, transparent 70%, rgba(189,142,81,0.6) 72%, transparent 74%) 100% 0,
    /* Esquina inf-izq */
    radial-gradient(ellipse 24px 24px at 0 100%, transparent 70%, rgba(189,142,81,0.4) 72%, transparent 74%) 0 100%,
    radial-gradient(ellipse 18px 18px at 0 100%, transparent 70%, rgba(189,142,81,0.6) 72%, transparent 74%) 0 100%,
    /* Esquina inf-der */
    radial-gradient(ellipse 24px 24px at 100% 100%, transparent 70%, rgba(189,142,81,0.4) 72%, transparent 74%) 100% 100%,
    radial-gradient(ellipse 18px 18px at 100% 100%, transparent 70%, rgba(189,142,81,0.6) 72%, transparent 74%) 100% 100%;
  background-repeat:no-repeat; background-size:48px 48px;
  opacity:0; transition:opacity 0.3s ease;
}

.voto .foto-escenario:hover::after{opacity:1}

/* Safe area inferior - degradado para texto superpuesto */
.voto .foto-escenario .safe-area{
  position:absolute; bottom:0; left:0; right:0;
  height:40%; pointer-events:none; z-index:2;
  background:linear-gradient(0deg, rgba(110,50,106,0.85) 0%, rgba(140,72,136,0.4) 40%, transparent 100%);
  border-radius:0 0 16px 16px; opacity:.94; transition:opacity 0.3s ease;
}

.voto .foto-escenario:hover .safe-area{opacity:1}

.voto .foto-escenario .safe-area .info{
  position:absolute; bottom:16px; left:16px; right:16px;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.6);
}

.voto .foto-escenario .safe-area .nombre{
  font:700 1.35rem/1.2 'Playfair Display',serif; letter-spacing:0.3px;
}

.voto .foto-escenario .safe-area .categoria{
  font:500 0.8rem/1.3 Montserrat,sans-serif;
  color:rgba(255,255,255,0.85);
  text-transform:uppercase; letter-spacing:0.8px; margin-top:2px;
}

.voto .foto-escenario .safe-area .nombre:empty:after{content:'Selecciona una candidata';}

/* Capa decorativa sutil sobre el fondo */
.voto .foto-escenario .bg-layer{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 40%),
    linear-gradient(0deg, rgba(189,142,81,0.03) 0%, transparent 25%);
  opacity:0.6;
}

.voto .foto-escenario .foto{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  position:relative; z-index:1;
  transition:transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.5s ease, opacity 0.25s ease;
  transform-origin:center center; will-change:transform, filter, opacity;
}

/* Cross-fade para cambio de candidata */
.voto .foto-escenario .foto.cargando{opacity:0;}
.voto .foto-escenario .foto.cargada{opacity:1;}

/* Fallback sin foto */
.voto .foto-escenario .sin-foto{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  font:700 4rem/1 'Playfair Display',serif;
  color:rgba(189,142,81,0.3);
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
  background:
    radial-gradient(ellipse at 25% 15%, rgba(189,142,81,0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(140,72,136,0.15) 0%, transparent 55%),
    linear-gradient(145deg, #F0E8E0 0%, #F5EDE8 35%, #FDF3E8 65%, #FFFDF8 100%);
}

/* Modos de imagen - se aplican vía clase en .foto-escenario */
.foto-modo-contain .foto{object-fit:contain}
.foto-modo-cover .foto{object-fit:cover}
.foto-modo-fill .foto{object-fit:fill}
.foto-modo-scale-down .foto{object-fit:scale-down}
.foto-modo-none .foto{object-fit:none}

/* Posiciones de anclaje */
.foto-pos-center .foto{object-position:center}
.foto-pos-top .foto{object-position:center top}
.foto-pos-bottom .foto{object-position:center bottom}
.foto-pos-left .foto{object-position:left center}
.foto-pos-right .foto{object-position:right center}
.foto-pos-top-left .foto{object-position:left top}
.foto-pos-top-right .foto{object-position:right top}
.foto-pos-bottom-left .foto{object-position:left bottom}
.foto-pos-bottom-right .foto{object-position:right bottom}

/* Zoom al hover - DIFERENCIADO POR MODO */
.voto .foto-escenario:hover .foto{
  filter:brightness(1.08) saturate(1.12) contrast(1.03);
}

/* Cover: zoom más fuerte + Ken Burns */
.foto-modo-cover:hover .foto{
  transform:scale(1.12) !important; animation-play-state:paused;
}

.foto-modo-cover .foto{animation:kenBurns 25s ease-in-out infinite alternate;}

/* Contain/Scale-down: zoom moderado para ver detalles sin recortar */
.foto-modo-contain:hover .foto,
.foto-modo-scale-down:hover .foto{transform:scale(1.08);}

/* Fill: zoom ligero (ya está estirada) */
.foto-modo-fill:hover .foto{transform:scale(1.04);}

/* None: zoom muy ligero */
.foto-modo-none:hover .foto{transform:scale(1.02);}

@keyframes kenBurns{
  0%{transform:scale(1.06) translate(0,0)}
  100%{transform:scale(1.18) translate(-3%,-4%)}
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
/* Reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .voto .foto-escenario .foto,
  .voto .foto-escenario::before,
  .voto .foto-escenario::after,
  .voto .foto-escenario .safe-area{
    transition:none !important; animation:none !important;
  }
  .foto-modo-cover .foto{animation:none !important}
  .voto .foto-escenario:hover .foto{transform:none !important; filter:none !important}
}

/* Alto contraste */
@media (prefers-contrast: high){
  .voto .foto-escenario{
    border:3px solid var(--dorado);
    box-shadow:0 0 0 3px var(--purpura-profundo), 0 25px 60px rgba(0,0,0,0.7);
  }
  .voto .foto-escenario::before{
    border:2px solid #fff; box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 #000;
  }
  .voto .foto-escenario .safe-area{
    background:linear-gradient(0deg, #000 0%, transparent 100%);
  }
}

/* Responsive */
@media(max-width:720px){
  .voto .foto-escenario{
    height:330px; border-radius:12px;
  }
  .voto .foto-escenario::before,
  .voto .foto-escenario::after{border-radius:12px}
  .voto .foto-escenario .safe-area{border-radius:0 0 12px 12px}
  .foto-modo-cover .foto{animation:none}
  .foto-modo-cover:hover .foto{transform:scale(1.08) !important}
  .foto-modo-contain:hover .foto,
  .foto-modo-scale-down:hover .foto{transform:scale(1.05)}
}

@media(hover:none){
  .voto .foto-escenario::before,.voto .foto-escenario::after{opacity:.7;}
  .voto .foto-escenario .foto{filter:brightness(1.04) saturate(1.06);}
}

/* Estado cerrado: imagen completa centrada */
.foto-escenario[style]{--estado-color:var(--dorado);}
.foto-escenario[style] + .cuerpo .votacion-no-disponible{
  border-color:color-mix(in srgb,var(--estado-color) 60%,white);
  background:linear-gradient(135deg,#FFFDF1,color-mix(in srgb,var(--estado-color) 18%,white));
}
.foto-escenario[style] + .cuerpo .votacion-no-disponible:before{background:var(--estado-color)}
.foto-escenario[style] .foto{object-fit:contain;object-position:center}

/* Resultados públicos */
.resultados-publicos{
  position:relative; overflow:hidden;
  background:linear-gradient(145deg, #FFFDF8, #FFF7E8);
  border-color:var(--borde);
}

.resultados-publicos:before{
  content:'✦'; position:absolute; right:22px; top:10px;
  color:var(--dorado); font-size:40px; opacity:.5;
}

.resultados-publicos h2{margin-top:0;font-size:29px;color:var(--purpura);}
.resultados-publicos p{margin:18px 0 6px;color:var(--texto);font-weight:600;}
.resultados-publicos .barra-voto{height:13px;margin-bottom:13px;}
.resultados-tabla{max-width:700px;margin:28px auto;padding:26px;box-shadow:0 12px 28px rgba(92,54,101,.12);}
.resultados-encabezado{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:1;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(189,142,81,.3);}
.resultados-tabla h2{margin:0;max-width:360px;line-height:1.15;}
.resultados-total{flex:0 0 auto;min-width:150px;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,var(--purpura),var(--purpura-profundo));color:#fff;text-align:center;box-shadow:0 5px 12px rgba(92,54,101,.22);}
.resultados-total span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.82;}
.resultados-total strong{display:block;margin-top:2px;font:700 27px/1 'Playfair Display',serif;}
.resultados-tabla table{width:100%;border-collapse:separate;border-spacing:0 7px;position:relative;z-index:1;}
.resultados-tabla th{padding:0 15px 7px;color:var(--purpura-profundo);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;text-align:left;}
.resultados-tabla td{padding:14px 15px;background:rgba(255,255,255,.78);color:var(--texto);font-weight:600;box-shadow:0 2px 7px rgba(92,54,101,.05);}
.resultados-tabla td:first-child{border-radius:10px 0 0 10px;}
.resultados-tabla td:last-child{border-radius:0 10px 10px 0;text-align:right;font-size:1.15rem;font-weight:700;color:var(--purpura);}
.resultados-tabla tbody tr{transition:transform .18s ease,filter .18s ease;}
.resultados-tabla tbody tr:hover{transform:translateX(3px);filter:brightness(.985);}
@media(max-width:560px){.resultados-tabla{padding:20px 16px}.resultados-encabezado{align-items:flex-start;flex-direction:column;gap:15px}.resultados-total{width:100%;box-sizing:border-box;padding:14px 16px}.resultados-total span{margin-bottom:8px;font-size:.73rem;letter-spacing:.09em}.resultados-total strong{margin-top:0;font-size:33px;line-height:1.08}.resultados-tabla h2{font-size:24px}.resultados-tabla td,.resultados-tabla th{padding-left:11px;padding-right:11px;}}
@media(max-width:560px){
  .resultados-tabla{padding:18px 12px;}
  .resultados-tabla table,.resultados-tabla tbody,.resultados-tabla tr,.resultados-tabla td{display:block;width:100%;}
  .resultados-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .resultados-tabla table{border-spacing:0;}
  .resultados-tabla tbody{display:grid;gap:10px;}
  .resultados-tabla tbody tr{padding:0;border:1px solid rgba(189,142,81,.25);border-radius:12px;background:rgba(255,255,255,.82);box-shadow:0 3px 9px rgba(92,54,101,.06);overflow:hidden;}
  .resultados-tabla td,.resultados-tabla td:last-child{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 13px;background:transparent;border-radius:0;box-shadow:none;text-align:right;font-size:1rem;}
  .resultados-tabla td+td{border-top:1px solid rgba(189,142,81,.18);}
  .resultados-tabla td:first-child{color:var(--purpura-profundo);font-size:.94rem;line-height:1.35;overflow-wrap:anywhere;text-align:left;}
  .resultados-tabla td:first-child:before{content:'Candidata';color:var(--gris);font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;}
  .resultados-tabla td:last-child:before{content:'Votos';color:var(--gris);font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;}
  .resultados-tabla tbody tr:hover{transform:none;filter:none;}
}

/* Ajustes finales de experiencia móvil. Mantienen intacta la vista de escritorio. */
@media (max-width:720px){
  html,body{max-width:100%;overflow-x:hidden;}
  .contenedor{width:min(100% - 24px,560px);}
  .barra{padding:9px 0 10px;}
  .barra .contenedor{min-height:38px;}
  .marca{display:flex;align-items:center;min-width:0;font-size:clamp(17px,5vw,21px);line-height:1.15;}
  .marca:before{flex:0 0 30px;width:30px;height:30px;margin-right:8px;font-size:19px;}
  main>.hero{margin:22px auto 14px;padding:0 4px;}
  main>.hero h1{font-size:clamp(1.75rem,8vw,2.35rem);line-height:1.08;}
  main>.hero h1:after{width:58px;height:2px;margin:12px auto 11px;}
  main>.hero p{font-size:.9rem;line-height:1.5;}
  .tarjeta.voto{padding:6px;border-radius:14px;margin-bottom:22px;}
  .voto .foto-escenario{height:clamp(270px,78vw,330px);border-radius:10px;}
  .voto .foto-escenario .safe-area .info{left:13px;right:13px;bottom:13px;}
  .voto .foto-escenario .safe-area .nombre{font-size:clamp(1.08rem,5vw,1.35rem);overflow-wrap:anywhere;}
  .voto .foto-escenario .safe-area .categoria{font-size:.7rem;}
  .voto .cuerpo{padding:17px 10px 11px;}
  .voto .cuerpo form:before{font-size:.64rem;margin-bottom:8px;}
  .voto .campo{gap:7px;margin-bottom:13px;}
  .voto select{width:100%;min-height:52px;padding:12px 39px 12px 12px;font-size:14px;}
  .voto #bio{min-height:0;margin-bottom:13px;padding:11px 12px;font-size:.84rem;line-height:1.5;}
  .voto .boton.dorado{width:100%;min-height:50px;padding:13px 16px;font-size:14px;}
  .turnstile-campo{width:100%;margin-bottom:9px;overflow:hidden;}
  .turnstile-campo .cf-turnstile{max-width:100%;}
  .g-recaptcha{max-width:100%;overflow:hidden;}
  .mensaje{padding:10px 12px;font-size:13px;line-height:1.45;overflow-wrap:anywhere;}
  .resultados-publicos{margin-top:20px!important;padding:16px 13px;}
  .resultados-publicos h2{font-size:24px;}
  .resultados-publicos p{font-size:.86rem;line-height:1.4;margin:14px 0 6px;overflow-wrap:anywhere;}
  .mantenimiento{margin:20px auto;padding:0;}
  .mantenimiento-imagen{height:clamp(170px,48vw,220px);}
  .mantenimiento-contenido{padding:19px 15px 22px;}
  .mantenimiento-contenido h1{font-size:1.6rem;line-height:1.15;}
  .mantenimiento-contenido p{font-size:.88rem;line-height:1.55;overflow-wrap:anywhere;}
  .mantenimiento-reapertura{margin-top:16px;padding:12px;font-size:.83rem;}
  .mantenimiento-reapertura strong{font-size:17px;line-height:1.25;}
}

@media (max-width:359px){
  .contenedor{width:calc(100% - 18px);}
  .marca{font-size:16px;}
  .marca:before{flex-basis:27px;width:27px;height:27px;margin-right:6px;font-size:17px;}
  .voto .foto-escenario{height:265px;}
  .voto .cuerpo{padding-left:8px;padding-right:8px;}
  .contador-unidades>div{min-width:46px;}
  .contador-unidades strong{font-size:1.18rem;}
}

/* Resultados: composición vertical legible en teléfonos estrechos. */
@media (max-width:720px){
  .resultados-tabla{width:100%;max-width:560px!important;margin:20px auto!important;padding:18px 12px;border-radius:16px;}
  .resultados-tabla .resultados-encabezado{display:flex;align-items:stretch;gap:13px;margin-bottom:16px;padding-bottom:15px;}
  .resultados-tabla .resultados-encabezado h2{width:100%;font-size:clamp(1.55rem,7vw,2rem);line-height:1.12;}
  .resultados-tabla .resultados-total{display:flex;align-items:baseline;justify-content:center;gap:8px;width:100%;min-width:0;padding:12px 10px;}
  .resultados-tabla .resultados-total span{margin:0;font-size:.68rem;}
  .resultados-tabla .resultados-total strong{margin:0;font-size:2rem;}
  .resultados-tabla table,.resultados-tabla tbody,.resultados-tabla tr,.resultados-tabla td{display:block;width:100%;}
  .resultados-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .resultados-tabla table{border-spacing:0;}
  .resultados-tabla tbody{display:grid;gap:9px;}
  .resultados-tabla tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid rgba(189,142,81,.25);border-radius:11px;background:rgba(255,255,255,.84);box-shadow:0 3px 9px rgba(92,54,101,.06);}
  .resultados-tabla tbody td,.resultados-tabla tbody td:last-child{display:block;width:auto;padding:0;background:transparent;border:0;box-shadow:none;text-align:left;font-size:.9rem;line-height:1.35;}
  .resultados-tabla tbody td:first-child{overflow-wrap:anywhere;color:var(--texto);font-weight:600;}
  .resultados-tabla tbody td:last-child{min-width:54px;text-align:right;font-size:1.12rem;font-weight:800;color:var(--purpura);white-space:nowrap;}
  .resultados-tabla tbody td:before{content:none;}
  .resultados-tabla tbody tr:hover{transform:none;filter:none;}
}
.resultados-publicos .barra-voto i{
  background:linear-gradient(90deg, var(--dorado-claro), var(--dorado), #E8C46A);
  box-shadow:0 0 8px rgba(189,142,81,0.4);
}
