/* =========================================================
   VÍCTOR — web personal
   Los colores salen del logotipo: el puerto, los contenedores,
   el barco, el campo y el agua. Uno por tema.
   Para añadir un logro nuevo, baja al final del archivo:
   está todo en una lista comentada.
   ========================================================= */

:root{

  font-size: clamp(16px, 0.9vw + 4px, 72px);

  --crema:#F7EBD8;
  --crema-claro:#FFF8EC;
  --arena:#EFDCC0;
  --tinta:#2E3440;
  --tinta-suave:#5F6878;
  --linea:#E2CEAE;

  /* Los colores del logo, subidos de tono */
  --teja:#C6512E;
  --mostaza:#DFA22B;
  --campo:#5E8F4A;
  --agua:#2E7FA8;
  --barco:#9C5FA6;
  --cobre:#8B5E3C;

  --sombra:0 2px 0 rgba(46,52,64,.04), 0 1.4rem 2.4rem -1.4rem rgba(46,52,64,.45);
  --radio:1.1rem;
  --ancho:64rem;

  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --texto:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:5rem}
body{
  margin:0;
  font-family:var(--texto);
  font-size:1rem;
  line-height:1.65;
  color:var(--tinta);
  background-color:var(--crema);

  background-image:
    radial-gradient(42rem 30rem at 88% 4%,  rgba(223,162,43,.30), transparent 62%),
    radial-gradient(38rem 28rem at 4% 22%,  rgba(46,127,168,.22), transparent 62%),
    radial-gradient(40rem 30rem at 92% 46%, rgba(94,143,74,.22),  transparent 62%),
    radial-gradient(36rem 26rem at 6% 68%,  rgba(156,95,166,.20), transparent 62%),
    radial-gradient(42rem 30rem at 80% 92%, rgba(198,81,46,.22),  transparent 62%);
  background-attachment:fixed;
  overflow-wrap:break-word;
}

/* Grano de papel: una pizca de ruido encima de todo, sin tapar nada */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23r)' opacity='.5'/%3E%3C/svg%3E");
}
body > *{position:relative; z-index:2}

img{max-width:100%; height:auto; display:block}
a{color:var(--teja)}
:focus-visible{outline:3px solid var(--agua); outline-offset:3px; border-radius:.4rem}

h1,h2,h3{font-family:var(--display); line-height:1.12; margin:0 0 .5em; text-wrap:balance; font-weight:600}
h1{font-size:clamp(2.4rem,1.4rem+4vw,4.4rem); letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,1.2rem+2vw,2.8rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}
p,li{max-width:60ch}

.contenedor{width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto}

.saltar{position:absolute; left:-9999px; background:var(--tinta); color:var(--crema); padding:.7rem 1.1rem; z-index:100}
.saltar:focus{left:1rem; top:1rem}

/* ---------------- Barra de arriba ---------------- */
.barra{
  position:sticky; top:0; z-index:40;
  background:rgba(247,235,216,.88);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--linea);
}
.barra .contenedor{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.6rem}
.marca{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--tinta)}
.marca .cara{
  width:2.5rem; height:2.5rem; border-radius:50%; padding:.14rem; flex:none;
  background:conic-gradient(from 210deg,
    var(--teja), var(--mostaza), var(--campo), var(--agua), var(--barco), var(--teja));
}
.marca .cara img{width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:.1rem solid var(--crema-claro)}
.marca .nombre{font-family:var(--display); font-size:1.15rem; letter-spacing:.01em; line-height:1.15}

/* El logo, quieto, en el pie de las dos páginas. Sin efectos al pasar
   el ratón: no es un botón y no debe parecerlo. */
.sello{width:2.6rem; height:auto; opacity:.75}
.pie .contenedor picture{order:2; flex:none}
.barra nav{display:flex; gap:.2rem; flex-wrap:wrap}
.barra nav a{
  text-decoration:none; color:var(--tinta); font-size:.92rem;
  padding:.45rem .8rem; border-radius:999px;
}
.barra nav a:hover{background:rgba(198,81,46,.12); color:var(--teja)}
/* La página en la que estás va marcada, para saber siempre dónde
   te encuentras y que el cambio de página se note. */
.barra nav a[aria-current="page"]{
  background:var(--crema-claro); color:var(--teja); font-weight:600;
  box-shadow:inset 0 0 0 1.5px var(--teja);
}

/* ---------------- Portada ---------------- */
.portada{padding:5.5rem 0 3.5rem; text-align:center; position:relative; overflow:hidden}
.portada .halo{
  position:absolute; inset:-20% -10% auto -10%; height:36rem; z-index:-1;
  background:
    radial-gradient(28rem 20rem at 20% 30%, rgba(46,127,168,.20), transparent 65%),
    radial-gradient(26rem 20rem at 78% 22%, rgba(223,162,43,.26), transparent 65%),
    radial-gradient(24rem 18rem at 50% 78%, rgba(94,143,74,.20), transparent 65%);
  filter:blur(.4rem);
  animation:flotar 22s ease-in-out infinite alternate;
}
@keyframes flotar{
  from{transform:translate3d(-1.2rem,-.6rem,0) scale(1)}
  to{transform:translate3d(1.4rem,.8rem,0) scale(1.06)}
}
.portada img.logo{width:min(15rem,52%); margin:0 auto .6rem}

/* Foto redonda con un anillo de los colores del logo */
.retrato{
  width:11rem; height:11rem; margin:1.2rem auto 1.1rem; padding:.42rem;
  border-radius:50%;
  background:conic-gradient(from 210deg,
    var(--teja), var(--mostaza), var(--campo), var(--agua), var(--barco), var(--teja));
  box-shadow:var(--sombra);
}
.retrato img{width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:.28rem solid var(--crema-claro)}
.saludo{
  font-family:var(--display); font-size:clamp(1.15rem,.9rem+1vw,1.5rem);
  color:var(--tinta-suave); margin:0 0 .3rem;
}
.portada h1{margin-bottom:.35em}
/* Los párrafos tienen un ancho máximo de 60ch; sin margen automático se
   quedaban pegados a la izquierda y el botón salía descentrado. */
.portada p{margin-inline:auto}
.portada .frase{font-size:clamp(1.05rem,.95rem+.6vw,1.3rem); max-width:36ch; margin:0 auto 1.6rem}
.portada .frase b{color:var(--teja); font-weight:600}


.pegatinas{display:flex; flex-wrap:nowrap; gap:.5rem; justify-content:center; margin-bottom:0}
.pegatinas .salto{display:none}
.pegatina{
  display:inline-flex; align-items:center;
  font-size:.85rem; padding:.4rem 1.05rem; border-radius:999px;
  background:var(--crema-claro);
  border:1.5px solid var(--c,var(--cobre));
  color:color-mix(in srgb, var(--c,var(--cobre)) 72%, var(--tinta));
  box-shadow:0 .25rem .8rem -.5rem rgba(46,52,64,.5);
  transform:rotate(var(--giro,0deg));
  transition:transform .18s ease;
}
.pegatina:hover{transform:rotate(0deg) translateY(-2px)}
/* El color y la inclinación de cada pegatina se escriben en el HTML,
   así puedes añadir o quitar palabras sin que se descoloquen. */

.boton{
  display:inline-block; text-decoration:none; font-weight:600;
  background:var(--teja); color:#fff; padding:.75rem 1.6rem; border-radius:999px;
  box-shadow:var(--sombra); transition:transform .18s ease, filter .18s ease;
}
.boton:hover{transform:translateY(-2px); filter:brightness(1.06)}
.boton.suave{background:var(--crema-claro); color:var(--tinta); border:1.5px solid var(--linea)}

/* ---------------- Secciones ---------------- */
section{padding:3.4rem 0}
.titulillo{
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-suave); margin:0 0 .5rem;
}
.seccion-cabeza{margin-bottom:2rem}
.seccion-cabeza p{color:var(--tinta-suave); font-size:1.05rem}

/* Franja de color entre secciones */
.franja{height:.45rem; background:linear-gradient(90deg,
  var(--teja) 0 20%, var(--mostaza) 20% 40%, var(--campo) 40% 60%,
  var(--agua) 60% 80%, var(--barco) 80% 100%);
  border-radius:999px; margin:0 auto; width:min(100% - 2.4rem, var(--ancho))}

/* ---------------- Hacia dónde voy ---------------- */
.metas{display:grid; grid-template-columns:1fr; gap:1.1rem}
@media (min-width:760px){ .metas{grid-template-columns:repeat(2,1fr)} }
.meta{
  background:var(--crema-claro); border-radius:var(--radio); padding:1.5rem 1.5rem 1.6rem;
  border:1px solid var(--linea); box-shadow:var(--sombra);
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.meta::after{
  content:""; position:absolute; inset:auto -30% -60% -30%; height:8rem;
  background:radial-gradient(closest-side, var(--c), transparent 70%);
  opacity:.22;
}
.meta:hover{transform:translateY(-4px); box-shadow:0 2px 0 rgba(46,52,64,.04), 0 2rem 2.6rem -1.4rem rgba(46,52,64,.5)}
.meta .num{
  font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--c); opacity:.35;
  display:block; margin-bottom:.4rem;
}
.meta h3{color:var(--c)}
.meta p{margin:0; font-size:.97rem; color:var(--tinta-suave)}

/* ---------------- Bitácora ---------------- */
.filtros{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem}
.filtro{
  font:inherit; font-size:.88rem; cursor:pointer;
  border:1.5px solid var(--linea); background:var(--crema-claro); color:var(--tinta);
  padding:.4rem 1rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.filtro:hover{transform:translateY(-2px)}
.filtro .punto{width:.6rem; height:.6rem; border-radius:50%; background:var(--c,var(--tinta-suave))}
.filtro[aria-pressed="true"]{border-color:var(--c,var(--tinta)); background:color-mix(in srgb, var(--c,var(--tinta)) 14%, var(--crema-claro))}
.filtro[aria-pressed="false"]{opacity:.55}

.muro{display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:1.1rem}
.logro{
  background:var(--crema-claro); border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.2rem 1.3rem 1.3rem; box-shadow:var(--sombra);
  border-top:4px solid var(--c);
  opacity:0; transform:translateY(1.2rem);
  transition:opacity .5s ease, transform .5s ease, box-shadow .2s ease;
}
.logro.visible{opacity:1; transform:none}
.logro:hover{box-shadow:0 2px 0 rgba(46,52,64,.04), 0 2rem 2.6rem -1.4rem rgba(46,52,64,.5)}
.logro .cabecera{display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; flex-wrap:wrap}
.logro .etiqueta{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent);
  padding:.2rem .6rem; border-radius:999px;
}
.logro .fecha{font-size:.78rem; color:var(--tinta-suave)}
.logro h3{font-size:1.08rem; margin-bottom:.35rem}
.logro p{margin:0; font-size:.95rem; color:var(--tinta-suave)}
.logro .foto{
  margin:-1.2rem -1.3rem 1rem; aspect-ratio:16/10; overflow:hidden;
  border-radius:calc(var(--radio) - .2rem) calc(var(--radio) - .2rem) 0 0;
  background:var(--arena); display:flex; align-items:center; justify-content:center;
  color:var(--tinta-suave); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
}
.logro .foto img{width:100%; height:100%; object-fit:cover}

/* Aviso para quien tenga el JavaScript desactivado: solo lo ve él. */
.aviso-js{
  border:1.5px dashed var(--cobre); border-radius:var(--radio);
  background:var(--crema-claro); padding:1.2rem 1.4rem;
  box-shadow:var(--sombra);
}
.aviso-js strong{
  display:block; font-family:var(--display); font-size:1.05rem;
  color:var(--cobre); margin-bottom:.3rem;
}
.aviso-js p{margin:0; font-size:.95rem; color:var(--tinta-suave)}

/* ---------------- Aficiones ---------------- */
.aficiones{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.1rem}
.aficion{
  border-radius:var(--radio); padding:1.4rem 1.4rem 1.5rem; color:#fff;
  background:linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 62%, #2E3440));
  box-shadow:var(--sombra); transition:transform .2s ease;
}
.aficion:hover{transform:translateY(-4px) rotate(-.4deg)}
.aficion h3{color:#fff; margin-bottom:.3rem}
.aficion p{margin:0; font-size:.95rem; color:rgba(255,255,255,.9)}

/* ---------------- Cita ---------------- */
.cita{
  text-align:center; font-family:var(--display);
  font-size:clamp(1.3rem,1rem+1.6vw,2rem); max-width:30ch; margin:0 auto;
  color:var(--tinta);
}
.cita span{color:var(--teja)}

/* ---------------- Contacto ---------------- */
.contacto{
  background:var(--crema-claro); border:1px solid var(--linea); border-radius:var(--radio);
  padding:2.4rem 1.6rem; text-align:center; box-shadow:var(--sombra);
}
.contacto p{margin-inline:auto}

.pie{border-top:1px solid var(--linea); margin-top:3rem}
.pie .contenedor{
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center;
  justify-content:space-between;
  padding:1.4rem 0; font-size:.85rem; color:var(--tinta-suave);
}
.pie .contenedor > span:first-child{order:1}
.pie .contenedor > span:last-child{order:3}
.pie a{color:var(--tinta)}

@media (max-width:620px){
  /* Móvil: una sola columna y botones a todo lo ancho. */
  .barra .contenedor{min-height:4rem}
  /* La barra se parte en dos filas: arriba quién eres, abajo las dos
     páginas repartidas a partes iguales. En una sola fila no caben sin
     que el nombre se rompa. */
  .barra .contenedor{flex-wrap:wrap; justify-content:center; gap:.55rem; min-height:0; padding:.6rem 0}
  .marca{width:100%}
  .marca .nombre{font-size:.95rem; white-space:nowrap}
  .marca .cara{width:2.2rem; height:2.2rem}
  .barra nav{width:100%; gap:.45rem}
  .barra nav a{flex:1; text-align:center; font-size:.88rem; padding:.45rem .5rem}
  .portada{padding:2.6rem 0 2.2rem}
  .boton{display:block; text-align:center}
  .boton + .boton{margin-top:.6rem}
  .metas, .muro, .aficiones{grid-template-columns:1fr}
  .pegatinas{flex-wrap:wrap}
  .pegatinas .salto{display:block; flex-basis:100%; height:0; margin:0; padding:0; border:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .logro{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   PÁGINA DE CURRÍCULUM (curriculum.html)
   Mismo lenguaje que la portada, pero más sobrio: aquí se
   viene a leer datos, no a conocer a nadie.
   ========================================================= */

.cabeza-cv{padding:3.6rem 0 2.4rem; position:relative}
.cabeza-cv h1{font-size:clamp(2rem,1.3rem+2.6vw,3.2rem); margin-bottom:.4em}
.cabeza-cv .entradilla{font-size:1.08rem; max-width:52ch}
.datos-cv{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin:0;
  font-size:.88rem; color:var(--tinta-suave); max-width:none;
}
.datos-cv span{display:inline-flex; align-items:center; gap:.4rem}
.datos-cv span::before{
  content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--cobre);
}

/* Entradas con fecha a la izquierda */
.entrada{
  display:grid; grid-template-columns:9.5rem 1fr; gap:1.4rem;
  padding:1.4rem 0; border-bottom:1px solid var(--linea);
}
.entrada:last-of-type{border-bottom:0}
.entrada .cuando{
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c,var(--cobre)); padding-top:.35rem; font-variant-numeric:tabular-nums;
}
.entrada h3{font-size:1.1rem; margin-bottom:.2rem}
.entrada .donde{
  font-size:.92rem; color:var(--c,var(--cobre)); margin:0 0 .5rem; font-weight:600;
}
.entrada p{margin:0 0 .6rem; font-size:.97rem}
.entrada p:last-child{margin-bottom:0}
.entrada ul{margin:.2rem 0 0; padding-left:1.1rem}
.entrada li{margin-bottom:.45rem; font-size:.97rem}
.entrada li::marker{color:var(--c,var(--cobre))}
.entrada .con{
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave);
}

/* Herramientas */
.herramientas{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.7rem}
.util{
  display:flex; align-items:center; gap:.8rem;
  border:1px solid var(--linea); background:var(--crema-claro);
  border-radius:var(--radio); padding:.8rem 1rem;
}
.util .barrita{width:.28rem; height:2rem; border-radius:2px; background:var(--c); flex:none}
.util.aprendiendo{opacity:.72}
.util.aprendiendo .barrita{
  background:repeating-linear-gradient(180deg, var(--c) 0 .25rem, transparent .25rem .5rem);
}
.util b{font-size:.95rem}
.util small{
  display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.leyenda{
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-suave); margin-top:1rem;
}

/* Recuadros de «esto falta por rellenar» */
.pendiente{
  border:1.5px dashed var(--cobre); border-radius:var(--radio);
  padding:.9rem 1.2rem; margin-top:1.6rem; font-size:.88rem;
  background:rgba(255,255,255,.35); max-width:66ch;
}
.pendiente b{
  display:block; text-transform:uppercase; letter-spacing:.12em;
  font-size:.7rem; color:var(--cobre); margin-bottom:.2rem;
}

@media (max-width:620px){
  .entrada{grid-template-columns:1fr; gap:.3rem; padding:1.1rem 0}
  .entrada .cuando{padding-top:0}
  .herramientas{grid-template-columns:1fr}
}