:root{
  --ink: #14202E;
  --ink-soft: #1F3247;
  --ink-line: rgba(237,232,218,0.18);
  --paper: #F4F0E6;
  --paper-2: #ECE6D6;
  --brass: #B08A4E;
  --brass-light: #D8B876;
  --boll: #56683F;
  --rust: #8B4A32;
  --text-on-ink: #EDE8DA;
  --text-on-ink-dim: #B9BFC4;
  --text-on-paper: #221F1A;
  --text-on-paper-dim: #5B5648;
  --radius: 2px;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--text-on-paper);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Newsreader',serif;
  font-weight:500;
  margin:0;
  letter-spacing:0.01em;
}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
section{padding:60px 0;}
@media (max-width:720px){ section{padding:40px 0;} }

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:14px;
  display:block;
}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(20,32,46,0.96);
  border-bottom:1px solid var(--ink-line);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
}
.brand{
  display:flex; align-items:center; gap:12px; color:var(--text-on-ink); text-decoration:none;
}
.brand img{height:38px; width:auto;}
.brand-text{display:flex; flex-direction:column;}
.brand-name{
  font-family:'Newsreader',serif; font-size:20px; font-weight:600; letter-spacing:0.01em;
}
.brand-tag{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--brass-light); margin-top:2px;
}
nav.links{display:flex; gap:30px; align-items:center;}
nav.links a{
  color:var(--text-on-ink-dim); text-decoration:none; font-size:14px; font-weight:500;
  letter-spacing:0.02em; transition:color 0.2s ease; position:relative;
}
nav.links a:hover, nav.links a:focus-visible{color:var(--text-on-ink);}
nav.links a.current{color:var(--text-on-ink);}
nav.links a.current::after{
  content:""; position:absolute; left:0; right:0; bottom:-28px; height:2px; background:var(--brass);
}
nav.links a.portal{
  color:var(--ink); background:var(--brass-light); padding:9px 16px; border-radius:var(--radius);
  font-weight:600; font-size:13px;
}
nav.links a.portal:hover{background:var(--brass);}
.burger{display:none; background:none; border:0; color:var(--text-on-ink); font-size:26px; cursor:pointer;}
@media (max-width:980px){
  nav.links{
    position:fixed; inset:80px 0 0 0; background:var(--ink); flex-direction:column;
    padding:36px 28px; gap:24px; transform:translateY(-110%); transition:transform 0.3s ease;
    align-items:flex-start; overflow-y:auto;
  }
  nav.links.open{transform:translateY(0);}
  .burger{display:block;}
  nav.links a.current::after{display:none;}
}

/* ---------- PAGE HERO (con foto de fondo) ---------- */
.page-hero{
  position:relative;
  color:var(--text-on-ink);
  background-color:var(--ink);
  background-size:cover;
  background-repeat:no-repeat;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,32,46,0.88) 0%, rgba(20,32,46,0.82) 45%, rgba(20,32,46,0.94) 100%);
}
.page-hero .hero-inner{position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:0 28px;}

.page-hero.home{padding:60px 0 20px; background-position:50% 20%; background-size:120%; background-attachment: scroll;}
.page-hero.inner{padding:60px 0 20px; background-position:center; background-size:cover;}

/* En Inicio, la foto de fondo vive solo en la franja de marca/lead (hero-photo-band),
   no detras del eyebrow ni de las "ventanas" de generaciones */
.page-hero.home::before{display:none;}
.hero-photo-band{
  position:relative;
  left:50%;
  right:50%;
  width:100vw;
  margin-left:-50vw;
  margin-right:-50vw;
  margin-top:8px;
  background:linear-gradient(120deg, #16222f 0%, #1c2c3d 100%);
  overflow:hidden;
}
/* El texto queda alineado con el resto de la pagina (izquierda),
   pero la franja se extiende hasta el borde derecho real de la pantalla,
   asi la imagen se centra entre el texto y ese borde. */
.hero-photo-inner{
  position:relative;
  z-index:1;
  padding:44px 40px 40px max(28px, calc((100vw - var(--max)) / 2 + 28px));
  display:flex;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}
.hero-text{flex:0 1 auto; min-width:0;}
.hero-photo-band .hero-brand-row h1{white-space:nowrap;}
.hero-image{
  flex:1 1 320px; display:flex; align-items:center; justify-content:center;
}
.hero-image img,
.hero-image video{
  width:100%; max-width:600px; height:auto; aspect-ratio:506 / 374; object-fit:cover;
  display:block;
  /* Ovalo con los bordes esfumados (fade) hacia el fondo */
  -webkit-mask-image:radial-gradient(ellipse closest-side, #000 55%, transparent 100%);
  mask-image:radial-gradient(ellipse closest-side, #000 55%, transparent 100%);
}
@media (max-width:900px){
  .hero-image{flex-basis:100%;}
  .hero-image img, .hero-image video{aspect-ratio:auto; height:280px;}
}
@media (max-width:640px){
  .hero-image img, .hero-image video{height:200px;}
  .hero-photo-band .hero-brand-row h1{white-space:normal;}
}

.page-hero h1{font-size:clamp(34px, 5.4vw, 62px); line-height:1.06; max-width:820px;}
.page-hero.home h1{font-size:clamp(28px, 3.4vw, 46px);}
@media (max-width:640px){ .page-hero.home h1{font-size:clamp(26px,7vw,38px);} }
.hero-brand-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.hero-logo{height:48px; width:auto; filter:brightness(0) invert(1); opacity:0.95;}
@media (max-width:640px){ .hero-logo{height:36px;} }
.hero-subtitle{
  font-family:'Newsreader',serif; font-style:italic; font-weight:400;
  font-size:clamp(19px, 2.4vw, 26px); color:var(--brass-light); margin-top:12px;
}
.page-hero p.lede{font-size:17px; color:var(--text-on-ink-dim); max-width:900px; margin-top:20px; margin-bottom:0; line-height:1.4;}

.lineage{margin-top:64px; display:flex; gap:0; border-top:1px solid var(--ink-line); flex-wrap:wrap;}
.lineage-item{flex:1; min-width:210px; padding:20px 24px 0 0; border-right:1px solid var(--ink-line); margin-right:24px;}
.lineage-item:last-child{border-right:none;}
.lineage-year{font-family:'IBM Plex Mono',monospace; color:var(--brass-light); font-size:13px; letter-spacing:0.08em;}
.lineage-name{font-family:'Newsreader',serif; font-size:18px; margin-top:8px;}
.lineage-desc{font-size:16px; color:var(--text-on-ink-dim); margin-top:6px;}

/* ---------- SECTION HEADS ---------- */
.section-head{max-width:640px; margin-bottom:20px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:18px; white-space:nowrap;}
@media (max-width:760px){ .section-head h2{white-space:normal;} }
.section-head p{color:var(--text-on-paper-dim); margin-top:14px; font-size:16px;}

/* ---------- NOSOTROS ---------- */
.nosotros-grid{display:grid; grid-template-columns:1fr; gap:48px; align-items:start;}
.nosotros-copy p{margin:0 0 16px; color:var(--text-on-paper); font-size:16px;}
.nosotros-copy p strong{color:var(--ink);}
.founded{
  font-family:'IBM Plex Mono',monospace; font-size:17px; font-weight:600; color:var(--boll);
  margin-top:28px;
}

.team{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:760px){ .team{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .team{grid-template-columns:1fr;} }
.team-card{background:var(--paper-2); overflow:hidden; border-radius:12px;}
.team-photo{width:100%; aspect-ratio:1/1; object-fit:cover; filter:grayscale(18%) contrast(1.02); border-radius:12px;}
.team-photo-placeholder{
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--brass-light); font-family:'Newsreader',serif; font-size:34px;
}
.team-photo-pending{
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--rust); display:block; margin-top:6px;
}
.team-info{padding:14px 16px 18px;}
.team-name{font-family:'Newsreader',serif; font-size:16px;}
.team-role{font-size:12.5px; color:var(--text-on-paper-dim); margin-top:2px;}
.team-mail{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--brass); margin-top:8px; display:block; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.team-mail:hover{text-decoration:underline;}

/* ---------- SERVICIOS (grande, ES/EN) ---------- */
section.servicios-page{background:var(--ink); color:var(--text-on-ink);}
section.servicios-page .section-head p{color:var(--text-on-ink-dim);}
.serv-rows{border-top:1px solid var(--ink-line);}
.serv-row{
  display:grid; grid-template-columns:90px 1fr 1fr; gap:32px;
  padding:40px 0; border-bottom:1px solid var(--ink-line);
  align-items:center;
}
@media (max-width:820px){ .serv-row{grid-template-columns:56px 1fr; row-gap:14px;} .serv-row .serv-en{grid-column:2;} }
.serv-row .serv-num{font-family:'IBM Plex Mono',monospace; font-size:15px; color:var(--brass-light);}
.serv-row svg{width:34px; height:34px; stroke:var(--brass-light); fill:none; stroke-width:1.3; margin-bottom:14px;}
.serv-es h3{font-family:'Newsreader',serif; font-size:26px; font-weight:500; color:var(--text-on-ink);}
.serv-es p{margin-top:10px; font-size:17.5px; color:var(--text-on-ink-dim); max-width:480px;}
.serv-en{border-left:1px solid var(--ink-line); padding-left:32px;}
@media (max-width:820px){ .serv-en{border-left:none; padding-left:0; padding-top:6px;} }
.serv-en .lang-tag{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.12em; color:var(--boll); text-transform:uppercase;}
.serv-en p{margin-top:8px; font-size:17px; font-style:italic; color:var(--text-on-ink-dim); max-width:440px;}

/* ---------- PRECIOS CAA (signature) ---------- */
section.precios-page{background:var(--paper);}
.bulletin{background:var(--ink); color:var(--text-on-ink); position:relative; border:1px solid var(--ink-line);}
.bulletin::before, .bulletin::after{
  content:""; display:block; height:8px;
  background:repeating-linear-gradient(90deg, var(--paper) 0 6px, transparent 6px 12px);
}
.bulletin-head{
  padding:28px 32px 20px; border-bottom:1px dashed var(--ink-line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:flex-end;
}
.bulletin-title{font-family:'Newsreader',serif; font-size:22px;}
.bulletin-meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--brass-light); text-align:right; line-height:1.8;}
.bulletin-body{padding:30px 32px 36px;}
.bulletin-doc{background:#fff; padding:10px; border:1px solid rgba(0,0,0,0.06);}
.bulletin-doc img{width:100%; height:auto; display:block;}
.bulletin-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; align-items:center;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; font-size:13.5px; font-weight:600;
  text-decoration:none; border-radius:var(--radius); font-family:'Inter',sans-serif; cursor:pointer; border:1px solid transparent;
}
.btn-brass{background:var(--brass-light); color:var(--ink);}
.btn-brass:hover{background:var(--brass);}
.btn-outline{border-color:var(--ink-line); color:var(--text-on-ink);}
.btn-outline:hover{border-color:var(--brass-light); color:var(--brass-light);}
.bulletin-source{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-on-ink-dim); margin-top:18px;
}
.caa-editnote{
  background:var(--paper-2); border:1px dashed var(--brass); padding:16px 20px; font-size:13px;
  color:var(--text-on-paper-dim); margin-top:28px;
}
.caa-editnote strong{color:var(--rust);}

.ice-panel{background:var(--ink); border:1px solid var(--ink-line); padding:28px 32px 24px; margin-top:32px;}
@media (max-width:640px){
  .wrap{padding:0 16px;}
  .ice-panel{padding:20px 14px 18px;}
  .bulletin-head{padding:22px 16px 16px;}
  .bulletin-body{padding:22px 16px 26px;}
}
.ice-panel table.price{width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:13.5px; margin-top:14px;}
.ice-panel table.price th{text-align:left; font-weight:500; color:var(--brass-light); text-transform:uppercase; font-size:11px; letter-spacing:0.06em; padding:8px 14px 8px 0; border-bottom:1px solid var(--ink-line);}
.ice-panel table.price td{padding:9px 14px 9px 0; border-bottom:1px solid var(--ink-line); color:var(--text-on-ink);}
.ice-panel table.price td.num, .ice-panel table.price th.num{text-align:right; padding-right:0;}
.ice-panel table.price tr:last-child td{border-bottom:none;}
.ice-head{margin-bottom:16px;}
.ice-head .bulletin-title{color:var(--text-on-ink); margin-top:4px;}
.ice-panel .bulletin-source{color:var(--text-on-ink-dim); margin-top:16px;}

/* ---------- ENTIDADES ---------- */
.ent-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px;}
@media (max-width:900px){ .ent-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .ent-grid{grid-template-columns:1fr;} }
.ent-logo{height:44px; width:auto; max-width:120px; object-fit:contain; margin-bottom:16px;}
.ent-card{border:1px solid rgba(34,31,26,0.12); padding:32px 28px; background:var(--paper-2); border-radius:12px; position:relative; overflow:hidden;}
.ent-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brass-light), transparent);}
.ent-card .eyebrow{color:var(--boll);}
.ent-card h3{font-size:20px; margin-bottom:8px;}
.ent-card p{font-size:14px; color:var(--text-on-paper-dim); margin:0;}

/* Variante de 2 columnas (Inicio: Nosotros + Precios) */
.ent-grid.ent-grid-2{grid-template-columns:1fr 1fr;}
@media (max-width:640px){ .ent-grid.ent-grid-2{grid-template-columns:1fr;} }

/* ---------- CONTACTO ---------- */
section.contacto-page{background:var(--ink); color:var(--text-on-ink);}
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-list{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:22px;}
.contact-list li{display:flex; gap:16px; align-items:flex-start;}
.contact-list svg{width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:1.5; flex-shrink:0; margin-top:2px;}
.contact-list a{text-decoration:none; color:var(--ink); font-weight:600; font-size:15px;}
.contact-list a:hover{color:var(--brass); text-decoration:underline;}
.contact-list span.small{display:block; font-size:13px; color:var(--text-on-paper-dim); margin-top:4px;}
.contact-list div{color:var(--ink); font-size:15px; line-height:1.5; font-weight:500;}
.map-wrap{border:1px solid var(--ink-line); filter:grayscale(35%) contrast(1.1) brightness(0.9);}
.map-wrap iframe{width:100%; height:100%; min-height:340px; border:0; display:block;}

/* ---------- PORTAL BANNER (client system access) ---------- */
.portal-banner{
  background:var(--paper-2); border:1px solid rgba(34,31,26,0.1); padding:26px 28px;
  display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
  margin-bottom:56px;
}
.portal-banner .txt strong{display:block; font-family:'Newsreader',serif; font-size:18px; color:var(--ink);}
.portal-banner .txt span{font-size:13.5px; color:var(--text-on-paper-dim);}

footer{background:var(--ink); color:var(--text-on-ink-dim); border-top:1px solid var(--ink-line); padding:36px 0 28px; font-size:12.5px;}
.footer-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--ink-line); margin-bottom:20px;}
.footer-nav{display:flex; flex-wrap:wrap; gap:20px;}
.footer-nav a{text-decoration:none; color:var(--text-on-ink-dim); font-size:13px;}
.footer-nav a:hover{color:var(--text-on-ink);}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- MODERN DESIGN - BOLD VERSION ---------- */

/* Gradientes en secciones alternadas */
section:nth-child(odd) {
  background: linear-gradient(135deg, rgba(216, 184, 118, 0.05) 0%, rgba(216, 184, 118, 0.02) 100%);
}

/* Hero mejorado con overlay gradient */
.page-hero::before {
  background: linear-gradient(180deg, rgba(22, 19, 17, 0.4) 0%, rgba(22, 19, 17, 0.7) 100%);
}

/* Cards con glassmorphism y hover dramático */
.team-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(216, 184, 118, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.team-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 24px 48px rgba(216, 184, 118, 0.25), 0 0 30px rgba(216, 184, 118, 0.15);
  border-color: rgba(216, 184, 118, 0.6);
  background: rgba(255, 255, 255, 0.15);
}

.ent-card {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(34, 31, 26, 0.15);
  background: linear-gradient(135deg, #EADFC5 0%, #DFCDA0 100%);
}

.ent-card:hover {
  transform: translateY(-8px) rotateY(2deg);
  box-shadow: 0 16px 40px rgba(216, 184, 118, 0.2), inset 0 0 30px rgba(216, 184, 118, 0.08);
  border-color: rgba(216, 184, 118, 0.5);
  background: linear-gradient(135deg, #E5D6AE 0%, #D8C193 100%);
}

/* Botones con gradiente y efecto más dramático */
.btn {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(216, 184, 118, 0.35);
  letter-spacing: 0.05em;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

/* Links con transición suave */
a {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a:hover {
  color: var(--brass);
  text-shadow: 0 0 8px rgba(216, 184, 118, 0.4);
}

/* Inputs y selects mejorados */
input, select, textarea {
  transition: all 0.3s ease;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px rgba(216, 184, 118, 0.5), inset 0 0 10px rgba(216, 184, 118, 0.1);
  background: rgba(255, 255, 255, 1);
  transform: scale(1.01);
}

/* Títulos con efecto de profundidad */
h1, h2, h3 {
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1:hover, h2:hover {
  text-shadow: 0 8px 16px rgba(216, 184, 118, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.02em;
}

/* AOS con animaciones más grandes */
[data-aos] {
  opacity: 0;
}

[data-aos="fade-up"] {
  transform: translate3d(0, 60px, 0);
}

[data-aos="fade-in"] {
  opacity: 0;
}

[data-aos="zoom-in"] {
  transform: scale(0.85);
  opacity: 0;
}

/* Efecto shine en cards */
.team-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.team-card:hover::after {
  opacity: 1;
}

/* Líneas decorativas en secciones */
section {
  position: relative;
}

section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 184, 118, 0.4), transparent);
}

/* Tabla con hover dramático */
.history-table tbody tr {
  transition: all 0.2s ease;
}

.history-table tbody tr:hover {
  background: rgba(216, 184, 118, 0.08);
  box-shadow: inset 0 0 15px rgba(216, 184, 118, 0.1);
}

/* Parallax sutil en hero */
.page-hero {
  background-attachment: fixed;
  background-size: 120%;
}

/* TIMELINE DE GENERACIONES - CON FORMATO TARJETA */
.timeline-generaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 60px;
}

.timeline-card {
  padding: 32px 28px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  border: 1px solid rgba(216, 184, 118, 0.35);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.timeline-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-light), transparent);
}

.timeline-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  border-color: rgba(216, 184, 118, 0.65);
  background: linear-gradient(135deg, var(--ink-soft) 0%, #2A3F58 100%);
}

.timeline-year {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 14px;
  font-weight: 600;
}

.timeline-name {
  font-family: 'Newsreader', serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.timeline-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}



/* ========== CLIMA PAGE STYLES ========== */
.clima-page { background: var(--paper); }

.clima-controls {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 24px !important;
  align-items: start !important;
  margin-bottom: 40px !important;
  background: var(--paper-2) !important;
  border: 1px solid rgba(34, 31, 26, 0.1) !important;
  padding: 24px 26px !important;
}
.clima-controls .clima-status-wrap {
  grid-column: 1 / -1 !important;
  height: auto !important;
  justify-content: flex-start !important;
}

.clima-field {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 62px !important;
  justify-content: flex-start !important;
}

/* el listado de resultados del buscador no debe sumar altura al campo
   (aunque esté vacío) porque desalinea el campo de Localidad de al lado;
   se muestra flotando debajo del input, sin empujar el layout */
#buscadorResultados {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  margin-top: 8px !important;
  z-index: 5 !important;
}

.clima-field label {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-on-paper-dim) !important;
  margin-bottom: 6px !important;
  line-height: 1 !important;
  height: auto !important;
  display: block !important;
  white-space: nowrap !important;
}

.clima-field select {
  height: 44px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border: 1px solid rgba(34, 31, 26, 0.2) !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: #fff !important;
  color: var(--text-on-paper) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  line-height: 24px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.clima-field input[type="text"] {
  height: 44px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border: 1px solid rgba(34, 31, 26, 0.2) !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: #fff !important;
  color: var(--text-on-paper) !important;
  line-height: 24px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.clima-field button {
  height: 44px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.clima-status-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 62px !important;
}

.clima-status {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12.5px !important;
  color: var(--text-on-paper-dim) !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

@media (max-width: 560px) {
  .clima-controls {
    grid-template-columns: 1fr !important;
  }
}

.clima-current{
  display:flex; flex-wrap:wrap; gap:40px; align-items:center; background:var(--ink); color:var(--text-on-ink);
  padding:32px 30px; margin-bottom:28px;
}
.clima-current .temp{font-family:'Newsreader',serif; font-size:56px; line-height:1;}
.clima-current .cond{font-size:15px; color:var(--text-on-ink-dim); margin-top:6px;}
.clima-current .loc{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brass); margin-bottom:8px;}
.clima-icon-wrap{display:flex; flex-shrink:0; color:var(--brass-light);}
.clima-icon-wrap .clima-icon-big{width:64px; height:64px; display:block;}
.clima-icon-day{width:40px; height:40px; display:inline-block; margin:10px 0 0;}
.day-card.hoy .clima-icon-day{color:var(--brass-light);}
.clima-extra{display:flex; gap:32px; flex-wrap:wrap; margin-left:auto;}
.clima-extra div{text-align:right;}
.clima-extra .val{font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--text-on-ink);}
.clima-extra .lbl{font-size:11px; color:var(--text-on-ink-dim); text-transform:uppercase; letter-spacing:0.06em; margin-top:2px;}

.rain-cards{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:40px;}
@media (max-width:560px){ .rain-cards{grid-template-columns:1fr;} }
.rain-card{background:var(--paper-2); border:1px solid rgba(34,31,26,0.1); padding:24px 26px;}
.rain-card .amt{font-family:'Newsreader',serif; font-size:38px; color:var(--boll);}
.rain-card .amt span{font-size:18px; font-family:'IBM Plex Mono',monospace; color:var(--text-on-paper-dim);}
.rain-card .lbl{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-on-paper-dim); margin-top:6px;}

.forecast-scroll{overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
.forecast-row{display:flex; gap:2px; background:rgba(34,31,26,0.08); border:1px solid rgba(34,31,26,0.1); min-width:700px;}
.day-card{flex:1; min-width:110px; background:var(--paper); padding:20px 14px 18px; text-align:center; border-top:3px solid var(--cond-color, var(--brass)); position:relative;}
.day-card.hoy{background:var(--ink);}
.day-card .d{font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-on-paper-dim);}
.day-card.hoy .d{color:var(--brass-light);}
.day-card .cond{font-size:12px; color:var(--text-on-paper-dim); margin-top:2px; min-height:32px;}
.day-card.hoy .cond{color:var(--text-on-ink-dim);}
.day-card .tmax{font-family:'Newsreader',serif; font-size:24px; color:var(--ink); margin-top:6px;}
.day-card.hoy .tmax{color:var(--text-on-ink);}
.day-card .tmin{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--text-on-paper-dim);}
.day-card.hoy .tmin{color:var(--text-on-ink-dim);}
.day-card .rain{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--cond-color, var(--boll));
  margin-top:12px; padding-top:10px; border-top:1px dashed rgba(34,31,26,0.15);
}
.day-card.hoy .rain{border-top-color:rgba(237,232,218,0.2);}

.sat-map-wrap {
  position: relative;
  height: 580px;
  margin-bottom: 28px;
}

.clima-source {
  font-size: 12px;
  color: var(--text-on-paper-dim);
  margin-top: 12px;
  line-height: 1.4;
}

/* ========== CUSTOM SELECT WRAPPER ========== */
.custom-select-wrapper {
  position: relative;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

.custom-select-wrapper select {
  position: absolute !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

.custom-select-display {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 44px !important;
  padding: 10px 14px !important;
  background: #fff !important;
  border: 1px solid rgba(34, 31, 26, 0.2) !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  color: var(--text-on-paper) !important;
  pointer-events: none !important;
  line-height: 24px !important;
}