/* ============================================================
   EL SALMÓN — hoja de estilos compartida
   Este archivo lo usan index.html, articulos.html y cada
   articulo-*.html. Edita AQUÍ para cambiar el look de TODO
   el sitio a la vez (colores, fuentes, tamaños).
   Para cambiar textos, fotos o videos, edita el .html de
   la página que quieras, no este archivo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Caveat:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

/* ---- PALETA DE COLORES ----
   Cambia estos valores hex y se actualiza en TODO el sitio.
   Ejemplo: si quieres más azul y menos rosa, cambia --rosa. */
:root{
  --rosa:#DC4F7C;
  --rosa-suave:#FBD8E4;
  --rosa-pastel:#FEF0F4;
  --tomate:#C42B34;
  --crema:#FFF9EC;
  --vainilla:#FCE9AB;
  --naranja:#FC8A2D;
  --oliva:#9E9820;
  --azul:#BFDCEA;
  --azul-osc:#7FAFC7;
  --tinta:#4A2E2E;
  --papel:#FFFFFF;
}

*{box-sizing:border-box;}

/* Candado general: ninguna imagen, la pongas donde la pongas,
   puede pasarse del ancho de su contenedor. Esto evita que una
   foto grande "reviente" el layout aunque falte una regla
   específica para ese lugar. */
img{
  max-width:100%;
  height:auto;
  display:block;
}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Quicksand', sans-serif;
  color:var(--tinta);
  background:
    repeating-linear-gradient(#FEF6E4 0px, #FEF6E4 34px, #F6E9CB 35px),
    var(--crema);
  background-attachment:local;
  overflow-x:hidden;
}
a{ color:inherit; }
::selection{ background:var(--rosa); color:#fff; }
a:focus-visible, button:focus-visible{ outline:3px dashed var(--tomate); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

.contenedor{ max-width:1180px; margin:0 auto; padding:0 28px; position:relative; }

/* ---------- doodles reutilizables ---------- */
.doodle{ position:absolute; pointer-events:none; z-index:2; }

/* ---------- washi tape ---------- */
.washi{
  position:absolute;
  width:90px; height:26px;
  opacity:0.88;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0.55) 0 6px, transparent 6px 12px);
  box-shadow:0 2px 4px rgba(0,0,0,0.08);
}
.washi.rosa{ background-color:var(--rosa); }
.washi.azul{ background-color:var(--azul-osc); }
.washi.naranja{ background-color:var(--naranja); }
.washi.oliva{ background-color:var(--oliva); }

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,249,236,0.92);
  backdrop-filter:blur(6px);
  border-bottom:3px dashed var(--rosa);
}
.barra-nav{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
}
.marca{
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
  font-family:'Chewy', cursive;
  font-size:26px;
  color:var(--tomate);
  -webkit-text-stroke:1px #ffffff;
  text-shadow:2px 2px 0 rgba(220,79,124,0.25);
}
nav.enlaces{ display:flex; gap:10px; }
nav.enlaces a{
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  color:var(--tinta);
  background:var(--papel);
  padding:8px 16px;
  border-radius:20px;
  border:2px solid var(--rosa-suave);
  transition:all .2s ease;
}
nav.enlaces a:hover{ background:var(--rosa); color:#fff; border-color:var(--rosa); transform:translateY(-2px) rotate(-1deg); }
.btn-menu{ display:none; background:none; border:none; cursor:pointer; color:var(--tomate); }
@media (max-width:820px){ nav.enlaces{ display:none; } .btn-menu{ display:block; } }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:70px 28px 60px;
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:30px;
  align-items:center;
}
.hero-titulo-wrap{ position:relative; }
h1.titulo-burbuja{
  font-family:'Chewy', cursive;
  font-size:clamp(46px, 6vw, 78px);
  color:var(--rosa);
  -webkit-text-stroke:3px #fff;
  text-shadow:4px 4px 0 var(--tomate), 4px 4px 0 var(--tomate);
  line-height:1.05;
  margin:0 0 6px;
  transform:rotate(-1.5deg);
}
h1.titulo-burbuja .peque{
  display:block;
  font-family:'Caveat', cursive;
  font-size:28px;
  -webkit-text-stroke:0;
  color:var(--oliva);
  text-shadow:none;
  transform:rotate(1deg);
  margin-top:6px;
}
.hero-desc{
  font-size:17px;
  font-weight:500;
  max-width:44ch;
  margin:18px 0 26px;
  background:var(--papel);
  border:2px dashed var(--rosa-suave);
  border-radius:16px;
  padding:16px 20px;
  position:relative;
}
.hero-desc::before{
  content:'💌';
  position:absolute; top:-16px; left:16px;
  font-size:22px;
}
.hero-cta{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  font-family:'Quicksand', sans-serif;
  font-weight:700; font-size:15px;
  color:#fff;
  background:var(--rosa);
  padding:13px 26px;
  border-radius:30px;
  border:3px solid var(--tomate);
  box-shadow:3px 3px 0 var(--tomate);
  transition:all .18s ease;
}
.hero-cta:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--tomate); }

.polaroid-strip{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  background:var(--papel);
  padding:14px 14px 20px;
  border-radius:4px;
  box-shadow:0 12px 30px -10px rgba(74,46,46,0.25);
  transform:rotate(3deg);
  max-width:230px;
  margin:0 auto;
}
.polaroid-strip .marco{
  aspect-ratio:1/0.72;
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.polaroid-strip .marco img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.polaroid-strip .pie{
  text-align:center;
  font-family:'Caveat', cursive;
  font-size:20px;
  color:var(--tomate);
  margin-top:4px;
}
.polaroid-strip .washi{ top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg); }

@media (max-width:820px){
  .hero{ grid-template-columns:1fr; }
  .polaroid-strip{ order:-1; transform:rotate(-2deg); }
}

/* ---------- índice / stickers ---------- */
.seccion-indice{
  position:relative;
  padding:60px 28px 70px;
}
.titulo-seccion{
  font-family:'Chewy', cursive;
  font-size:34px;
  color:var(--tomate);
  -webkit-text-stroke:2px #fff;
  text-shadow:3px 3px 0 var(--rosa);
  text-align:center;
  margin:0 0 6px;
}
.subtitulo-manuscrito{
  text-align:center;
  font-family:'Caveat', cursive;
  font-size:22px;
  color:var(--oliva);
  margin:0 0 40px;
}
.rejilla-indice{
  max-width:1000px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
}
.item-indice{
  position:relative;
  background:var(--papel);
  border-radius:18px;
  padding:26px 18px 20px;
  text-align:center;
  border:2px solid var(--rosa-suave);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.item-indice:nth-child(odd){ transform:rotate(-2deg); }
.item-indice:nth-child(even){ transform:rotate(2deg); }
.item-indice:hover, .item-indice.activo{
  transform:translateY(-6px) rotate(0deg) scale(1.03);
  background:var(--rosa-pastel);
  box-shadow:0 14px 22px -12px rgba(220,79,124,0.4);
}
.item-indice .washi{ top:-12px; left:50%; transform:translateX(-50%) rotate(-2deg); width:64px; height:20px; }
.item-indice .icono{ width:34px; height:34px; color:var(--rosa); margin:6px auto 10px; }
.item-indice h3{
  font-family:'Chewy', cursive;
  font-size:19px;
  color:var(--tinta);
  margin:0 0 6px;
}
.item-indice p{
  font-family:'Quicksand', sans-serif;
  font-size:12.5px;
  color:var(--tinta);
  opacity:0.7;
  margin:0;
}
@media (max-width:820px){ .rejilla-indice{ grid-template-columns:repeat(2,1fr); } }

/* ---------- artículos (polaroids) ---------- */
.seccion-articulos{ padding:20px 28px 40px; position:relative; }
.filtros{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:0 auto 50px;
  max-width:1180px;
}
.filtro{
  font-family:'Quicksand', sans-serif;
  font-weight:700; font-size:13px;
  background:var(--papel);
  border:2px solid var(--azul);
  color:var(--tinta);
  padding:9px 18px;
  border-radius:30px;
  cursor:pointer;
  transition:all .2s ease;
}
.filtro:hover{ border-color:var(--rosa); color:var(--rosa); }
.filtro.activo{ background:var(--azul-osc); border-color:var(--azul-osc); color:#fff; }

.rejilla-articulos{
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:44px 34px;
}
.polaroid{
  position:relative;
  background:var(--papel);
  padding:14px 14px 22px;
  border-radius:3px;
  box-shadow:0 14px 26px -14px rgba(74,46,46,0.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.polaroid:nth-child(3n+1){ transform:rotate(-2.2deg); }
.polaroid:nth-child(3n+2){ transform:rotate(1.6deg); }
.polaroid:nth-child(3n+3){ transform:rotate(-1deg); }
.polaroid:hover{ transform:rotate(0deg) translateY(-6px) scale(1.02); box-shadow:0 20px 30px -14px rgba(74,46,46,0.4); }
.polaroid .washi{ top:-14px; left:20px; }
.polaroid .marco-img{
  aspect-ratio:1/0.82;
  border-radius:2px;
  position:relative;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:10px;
}
.polaroid .icono-tarjeta{ width:28px; height:28px; color:rgba(255,255,255,0.9); }
.polaroid .etiqueta{
  position:absolute; top:10px; left:10px;
  font-family:'Quicksand', sans-serif;
  font-weight:700; font-size:10px;
  background:rgba(255,255,255,0.85);
  color:var(--tomate);
  padding:4px 9px;
  border-radius:12px;
}
.polaroid .cuerpo{ padding:14px 6px 0; }
.polaroid .meta{
  font-family:'Quicksand', sans-serif;
  font-size:11px; font-weight:700;
  color:var(--oliva);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:4px;
}
.polaroid h3{
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:25px;
  color:var(--tinta);
  margin:0 0 8px;
  line-height:1.1;
}
.polaroid p.extracto{
  font-size:13.5px;
  color:var(--tinta);
  opacity:0.78;
  margin:0 0 14px;
}
.polaroid .leer{
  font-family:'Quicksand', sans-serif;
  font-weight:700; font-size:12px;
  text-decoration:none;
  color:var(--rosa);
  display:inline-flex; align-items:center; gap:5px;
}
.polaroid .leer:hover{ text-decoration:underline; }

@media (max-width:1000px){ .rejilla-articulos{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .rejilla-articulos{ grid-template-columns:1fr; } }

/* ---------- nota manuscrita / cita ---------- */
.interludio{
  max-width:520px; margin:90px auto;
  padding:30px 34px;
  background:var(--vainilla);
  border-radius:6px;
  box-shadow:0 12px 24px -12px rgba(74,46,46,0.3);
  transform:rotate(-1.5deg);
  text-align:center;
  position:relative;
}
.interludio .washi{ top:-14px; left:50%; transform:translateX(-50%) rotate(2deg); }
.interludio p{
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:28px;
  color:var(--tomate);
  margin:0 0 8px;
}
.interludio span{
  font-family:'Quicksand', sans-serif;
  font-size:12px;
  font-weight:700;
  color:var(--oliva);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* ---------- boletín ---------- */
.seccion-boletin{
  padding:70px 28px 90px;
  display:flex; justify-content:center;
}
.caja-boletin{
  max-width:520px; width:100%;
  background:var(--papel);
  border:3px solid var(--azul-osc);
  border-radius:22px;
  padding:36px 32px;
  text-align:center;
  position:relative;
  box-shadow:6px 6px 0 var(--azul);
}
.caja-boletin .washi{ top:-14px; left:50%; transform:translateX(-50%) rotate(-2deg); }
.caja-boletin h2{
  font-family:'Chewy', cursive;
  font-size:26px;
  color:var(--azul-osc);
  margin:8px 0 8px;
}
.caja-boletin p{ font-size:14.5px; opacity:0.85; margin:0 0 22px; }
.form-boletin{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.form-boletin input[type=email]{
  font-family:'Quicksand', sans-serif;
  font-size:14px;
  padding:11px 16px;
  border:2px solid var(--azul);
  border-radius:20px;
  width:250px; max-width:65vw;
}
.form-boletin input:focus{ outline:none; border-color:var(--azul-osc); }
.form-boletin button{
  font-family:'Quicksand', sans-serif;
  font-weight:700; font-size:13.5px;
  background:var(--rosa);
  color:#fff;
  border:none;
  padding:11px 22px;
  border-radius:20px;
  cursor:pointer;
  transition:background .2s ease;
}
.form-boletin button:hover{ background:var(--tomate); }
.mensaje-boletin{ margin-top:14px; font-family:'Caveat', cursive; font-size:18px; color:var(--tomate); min-height:20px; }

/* ---------- footer ---------- */
footer{
  background:var(--rosa-pastel);
  border-top:3px dashed var(--rosa);
  padding:44px 28px 34px;
}
.footer-in{
  max-width:1180px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:26px;
}
footer .marca-pie{
  font-family:'Chewy', cursive;
  font-size:22px;
  color:var(--tomate);
  margin-bottom:6px;
}
footer p{ font-size:13px; opacity:0.8; max-width:32ch; }
footer .col h4{
  font-family:'Quicksand', sans-serif;
  font-size:12px; font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--oliva);
  margin:0 0 10px;
}
footer .col a{
  display:inline-block;
  text-decoration:none;
  color:var(--tinta);
  font-size:13px;
  background:var(--papel);
  padding:6px 12px;
  border-radius:14px;
  margin:0 6px 8px 0;
  border:1px solid var(--rosa-suave);
}
footer .col a:hover{ background:var(--rosa); color:#fff; }


/* ============================================================
   PÁGINA DE ARTÍCULO INDIVIDUAL
   Estas clases se usan solo en articulo-plantilla.html (y en
   las copias que hagas de ella). Sirven para: foto de portada,
   texto del artículo, galería de fotos y video embebido.
   ============================================================ */

.migas{
  max-width:780px; margin:30px auto 0; padding:0 28px;
  font-family:'Quicksand', sans-serif;
  font-size:13px; font-weight:700;
}
.migas a{ color:var(--rosa); text-decoration:none; }
.migas a:hover{ text-decoration:underline; }

.cabecera-articulo{
  max-width:780px; margin:20px auto 0; padding:0 28px;
}
.cabecera-articulo .meta-articulo{
  font-family:'Quicksand', sans-serif;
  font-weight:700; font-size:12.5px;
  color:var(--oliva);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:10px;
}
.cabecera-articulo h1{
  font-family:'Chewy', cursive;
  font-size:clamp(30px,5vw,46px);
  color:var(--rosa);
  -webkit-text-stroke:2px #fff;
  text-shadow:3px 3px 0 var(--tomate);
  line-height:1.1;
  margin:0 0 14px;
}
.cabecera-articulo .bajada{
  font-family:'Caveat', cursive;
  font-size:22px;
  color:var(--tinta);
  opacity:0.85;
  margin:0 0 26px;
}

/* Foto de portada — cambia el src en el html, no aquí */
.foto-portada{
  max-width:780px; margin:0 auto 40px; padding:0 28px;
}
.foto-portada img, .foto-portada .marco-color{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:6px;
  border:6px solid var(--papel);
  box-shadow:0 16px 30px -16px rgba(74,46,46,0.4);
}
.foto-portada .marco-color{ display:block; }

/* Cuerpo del texto del artículo */
.cuerpo-articulo{
  max-width:680px; margin:0 auto 50px; padding:0 28px;
  font-size:17px; line-height:1.75;
}
.cuerpo-articulo h2{
  font-family:'Chewy', cursive;
  font-size:24px;
  color:var(--tomate);
  margin:36px 0 14px;
}
.cuerpo-articulo p{ margin:0 0 18px; }
.cuerpo-articulo blockquote{
  font-family:'Caveat', cursive;
  font-size:24px;
  color:var(--tomate);
  border-left:4px dashed var(--rosa);
  padding-left:18px;
  margin:26px 0;
}

/* Galería de fotos: agrega tantos <img> o <div class="foto-galeria"> quieras */
.galeria{
  max-width:780px; margin:0 auto 50px; padding:0 28px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.galeria img, .galeria .foto-galeria{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:4px;
  border:5px solid var(--papel);
  box-shadow:0 8px 16px -10px rgba(74,46,46,0.35);
  transform:rotate(-1.5deg);
}
.galeria img:nth-child(even), .galeria .foto-galeria:nth-child(even){ transform:rotate(1.5deg); }

@media (max-width:640px){
  .galeria{ grid-template-columns:repeat(2,1fr); }
}

/* Video: envuelve tu <iframe> (YouTube/Vimeo) en este div para que
   se vea responsivo (se ajuste a cualquier pantalla) */
.video-envoltura{
  max-width:780px; margin:0 auto 50px; padding:0 28px;
}
.video-envoltura .marco-video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 16px 30px -16px rgba(74,46,46,0.4);
}
.video-envoltura .marco-video iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

.nav-articulo{
  max-width:680px; margin:0 auto 80px; padding:0 28px;
  display:flex; justify-content:space-between;
}
.nav-articulo a{
  font-family:'Quicksand', sans-serif;
  font-weight:700; font-size:13.5px;
  text-decoration:none;
  color:var(--rosa);
  background:var(--papel);
  border:2px solid var(--rosa-suave);
  padding:9px 16px;
  border-radius:20px;
}
.nav-articulo a:hover{ background:var(--rosa); color:#fff; }

/* Para cuando metes una <img> real dentro de una tarjeta .marco-img
   (en vez de solo un color de fondo): la foto se recorta y llena
   el marco entero, en vez de mostrarse a su tamaño original. */
.marco-img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}