:root{
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --burdeos:#7A1F2B;
  --burdeos-claro:#9E3A46;
  --papel:#FAF8F5;
  --papel-hueso:#F2EDE6;
  --tinta:#1F1D1C;
  --tinta-suave:#6B6560;
  --linea:#E2DCD4;
  --max:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background-color:var(--papel);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(122,31,43,0.028) 0, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(122,31,43,0.02) 0, transparent 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-attachment:fixed;
  color:var(--tinta);
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-weight:300;
  font-size:18px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
}

.envoltorio{max-width:var(--max);margin:0 auto;padding:0 28px}

/* ---------- Entradas ---------- */
.entra{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.entra.visible{opacity:1;transform:none}
.entra.d1{transition-delay:.08s}
.entra.d2{transition-delay:.16s}
.entra.d3{transition-delay:.24s}
.entra.d4{transition-delay:.32s}

/* ---------- Pentagrama ---------- */
.pentagrama{
  height:21px;
  background-image:
    linear-gradient(var(--linea),var(--linea)),
    linear-gradient(var(--linea),var(--linea)),
    linear-gradient(var(--linea),var(--linea)),
    linear-gradient(var(--linea),var(--linea)),
    linear-gradient(var(--linea),var(--linea));
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 0, 0 5px, 0 10px, 0 15px, 0 20px;
  animation:trazar 1.5s cubic-bezier(.22,.61,.36,1) .25s forwards;
}

@keyframes trazar{to{background-size:100% 1px}}

/* ---------- Cabecera ---------- */
.cabecera{padding:44px 0 0}

.marca{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:18px;
}

.marca__nombre{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(34px,6vw,58px);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1;
  color:var(--tinta);
  text-decoration:none;
  display:inline-block;
}

.marca__nombre em{font-style:italic;color:var(--burdeos)}

.marca__nombre{cursor:pointer;transition:color .3s ease}
.marca__nombre:hover em,.marca__nombre:focus-visible em{color:#5E1620}
.marca__nombre--actual{cursor:default}
.marca__nombre--actual:hover em{color:var(--burdeos)}

.marca__lema{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--burdeos);
  padding-bottom:8px;
}

.navegacion{
  font-family:var(--sans);
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  padding:14px 0 0;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.navegacion a{
  position:relative;
  color:var(--tinta-suave);
  text-decoration:none;
  padding-bottom:4px;
  transition:color .25s ease;
}

.navegacion a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--burdeos);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}

.navegacion a:hover,.navegacion a:focus-visible{color:var(--burdeos)}
.navegacion a:hover::after,.navegacion a:focus-visible::after{transform:scaleX(1)}

/* ---------- Portada ---------- */
.apertura{padding:70px 0 60px;max-width:760px}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--burdeos);
  display:block;
  margin-bottom:20px;
}

.apertura h1{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(30px,4.6vw,46px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-0.01em;
  margin-bottom:26px;
}

.apertura p{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  font-size:19px;
  color:var(--tinta-suave);
  margin-bottom:18px;
  max-width:640px;
}

.apertura p strong{color:var(--tinta);font-weight:500}

/* ---------- Bloques ---------- */
.bloque{padding:56px 0;border-top:1px solid var(--linea)}

.bloque__titulo{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:26px;
  font-weight:500;
  margin-bottom:32px;
}

.rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:2px;
  background:var(--linea);
  border:1px solid var(--linea);
}

.ficha{
  position:relative;
  background:var(--papel);
  padding:26px 24px 28px;
  transition:background .35s ease,transform .35s cubic-bezier(.22,.61,.36,1);
}

.ficha::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:2px;
  background:var(--burdeos);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}

.ficha:hover{background:#FFFDFA;transform:translateY(-3px)}
.ficha:hover::before{transform:scaleX(1)}

.ficha__icono{
  display:block;
  width:34px;
  height:34px;
  margin-bottom:16px;
  color:var(--burdeos);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}

.ficha__icono svg{width:100%;height:100%;display:block}

.ficha:hover .ficha__icono{transform:translateY(-2px) scale(1.06)}

.ficha__marca{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:13px;
  font-style:italic;
  color:var(--burdeos);
  display:block;
  margin-bottom:10px;
}

.ficha h3{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:21px;
  font-weight:500;
  margin-bottom:9px;
}

.ficha p{font-size:16px;color:var(--tinta-suave);line-height:1.65}

/* ---------- Aviso ---------- */
.aviso{
  background:var(--papel-hueso);
  border-left:3px solid var(--burdeos);
  padding:26px 30px;
}

.aviso h2{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:25px;
  font-weight:500;
  margin-bottom:10px;
}

.aviso p{font-size:18px;color:var(--tinta-suave);max-width:620px;text-align:justify;hyphens:auto;-webkit-hyphens:auto}

.aviso a{
  color:var(--burdeos);
  text-decoration:none;
  border-bottom:1px solid rgba(122,31,43,.35);
  transition:border-color .25s ease;
}
.aviso a:hover{border-bottom-color:var(--burdeos)}

/* ---------- Texto largo ---------- */
.texto{max-width:660px;padding:60px 0}

.texto h1{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(30px,4.4vw,42px);
  font-weight:400;
  line-height:1.25;
  margin-bottom:30px;
}

.texto h2{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:24px;
  font-weight:500;
  margin:46px 0 14px;
}

.texto p{margin-bottom:18px;color:var(--tinta-suave);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.texto p strong{color:var(--tinta);font-weight:500}

.texto ul{margin:0 0 18px 20px;color:var(--tinta-suave)}
.texto li{margin-bottom:9px}

.destacado{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:22px;
  font-style:italic;
  line-height:1.5;
  color:var(--burdeos);
  border-left:3px solid var(--burdeos);
  padding-left:24px;
  margin:36px 0;
}

/* ---------- Pie ---------- */
.pie{
  font-family:var(--sans);
  border-top:1px solid var(--linea);
  background:var(--papel-hueso);
  margin-top:20px;
  padding:52px 0 26px;
  font-size:15px;
  color:var(--tinta-suave);
}

.pie__fila{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
}

.pie__bloque{display:flex;flex-direction:column;gap:9px}

.pie__nombre{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:27px;
  color:var(--tinta);
  line-height:1.1;
}
.pie__nombre em{font-style:italic;color:var(--burdeos)}

.pie__lema{
  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--burdeos);
  margin:0;
}

.pie__principio{
  font-family:"Bodoni Moda",Georgia,serif;
  font-style:italic;
  font-size:16px;
  line-height:1.5;
  color:var(--burdeos);
  margin:14px 0 0;
  padding-left:14px;
  border-left:2px solid rgba(122,31,43,.28);
  max-width:330px;
}

.pie__rotulo{
  font-size:11px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--burdeos);
  font-weight:500;
  margin-bottom:4px;
}

.pie__bloque a{
  color:var(--tinta-suave);
  text-decoration:none;
  font-size:15px;
  width:fit-content;
  transition:color .22s ease,transform .22s ease;
}
.pie__bloque a:hover{color:var(--burdeos);transform:translateX(3px)}

.pie__redes{display:flex;gap:15px;margin-top:8px}

.pie__redes a{
  width:21px;
  height:21px;
  color:var(--tinta-suave);
  transition:color .25s ease,transform .25s ease;
}
.pie__redes a:hover{color:var(--burdeos);transform:translateY(-2px)}
.pie__redes svg{width:100%;height:100%;display:block}

.pie__raya{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  border-top:1px solid var(--linea);
  padding-top:22px;
  font-size:13px;
  color:var(--tinta-suave);
}

.pie__acceso{
  color:var(--tinta-suave);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.1em;
  opacity:.55;
  transition:opacity .25s ease,color .25s ease;
}
.pie__acceso:hover{opacity:1;color:var(--burdeos)}

/* ---------- Recursos editoriales ---------- */

/* Capitular */
.capitular::first-letter{
  font-family:"Bodoni Moda",Georgia,serif;
  float:left;
  font-size:4.1em;
  line-height:.82;
  font-weight:500;
  color:var(--burdeos);
  padding:6px 12px 0 0;
}

/* Entradilla */
.entradilla{
  font-size:21px;
  line-height:1.6;
  color:var(--tinta);
  font-weight:400;
  margin-bottom:30px;
  text-align:left;
}

/* Cita destacada dentro del texto */
.cita{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:26px;
  font-style:italic;
  line-height:1.42;
  color:var(--burdeos);
  margin:40px 0;
  padding-left:26px;
  border-left:3px solid var(--burdeos);
  text-align:left;
}

.cita cite{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  margin-top:14px;
}

/* Pregunta y respuesta */
.pregunta{
  font-family:var(--sans);
  font-weight:500;
  font-size:17px;
  color:var(--tinta);
  margin:34px 0 10px;
  text-align:left;
  padding-left:22px;
  position:relative;
}

.pregunta::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--burdeos);
}

/* Dato al margen */
.dato{
  background:var(--papel-hueso);
  border-top:2px solid var(--burdeos);
  padding:22px 24px;
  margin:36px 0;
}

.dato__rotulo{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--burdeos);
  display:block;
  margin-bottom:9px;
}

.dato p{font-size:16px;margin:0;text-align:left}

/* Botones */
.boton{
  display:inline-block;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--burdeos);
  border:1px solid var(--burdeos);
  padding:12px 24px;
  border-radius:2px;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}

.boton:hover,.boton:focus-visible{
  background:var(--burdeos);
  color:#FFF9F5;
  transform:translateY(-2px);
}

.boton--lleno{background:var(--burdeos);color:#FFF9F5}
.boton--lleno:hover{background:#5E1620;border-color:#5E1620}

.botonera{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0}

/* Enlaces dentro del texto */
.texto a:not(.boton){
  color:var(--burdeos);
  text-decoration:none;
  border-bottom:1px solid rgba(122,31,43,.32);
  transition:border-color .25s ease;
}
.texto a:not(.boton):hover{border-bottom-color:var(--burdeos)}

.texto em{font-style:italic;color:var(--tinta)}

/* Metadatos de artículo */
.meta{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--tinta-suave);
  margin-bottom:26px;
  padding-bottom:18px;
  border-bottom:1px solid var(--linea);
}

.meta strong{color:var(--burdeos);font-weight:500}

/* Separador de pentagrama corto */
.separador{
  height:21px;
  width:120px;
  margin:44px auto;
  background-image:
    linear-gradient(var(--linea),var(--linea)),
    linear-gradient(var(--linea),var(--linea)),
    linear-gradient(var(--linea),var(--linea)),
    linear-gradient(var(--linea),var(--linea)),
    linear-gradient(var(--linea),var(--linea));
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 0, 0 5px, 0 10px, 0 15px, 0 20px;
}

/* Nota al pie de artículo */
.nota{
  font-family:var(--sans);
  font-size:14px;
  color:var(--tinta-suave);
  border-top:1px solid var(--linea);
  padding-top:20px;
  margin-top:44px;
  text-align:left;
}

/* ---------- Enlace dentro de ficha ---------- */
.ficha__enlace{margin-top:14px}

.ficha__enlace a{
  font-family:var(--sans);
  font-size:14px;
  color:var(--burdeos);
  text-decoration:none;
  border-bottom:1px solid rgba(122,31,43,.3);
  transition:border-color .25s ease;
  word-break:break-word;
}
.ficha__enlace a:hover{border-bottom-color:var(--burdeos)}

/* ---------- Redes ---------- */
.redes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.red{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 22px;
  border:1px solid var(--linea);
  text-decoration:none;
  color:var(--tinta);
  background:var(--papel);
  transition:border-color .3s ease,transform .3s cubic-bezier(.22,.61,.36,1),background .3s ease;
}

.red:hover{
  border-color:var(--burdeos);
  transform:translateY(-3px);
  background:#FFFDFA;
}

.red__icono{
  width:30px;
  height:30px;
  flex:0 0 30px;
  color:var(--burdeos);
}
.red__icono svg{width:100%;height:100%;display:block}

.red__texto{display:flex;flex-direction:column;line-height:1.4}

.red__texto strong{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:19px;
  font-weight:500;
}

.red__texto em{
  font-family:var(--sans);
  font-style:normal;
  font-size:14px;
  color:var(--tinta-suave);
}

/* ---------- Formulario ---------- */
.formulario{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 22px;
  max-width:760px;
}

.campo{display:flex;flex-direction:column}
.campo--ancho{grid-column:1 / -1}

.campo label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--burdeos);
  margin-bottom:8px;
}

.campo input,.campo select,.campo textarea{
  font-family:"Spectral",Georgia,serif;
  font-size:17px;
  color:var(--tinta);
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:2px;
  padding:12px 14px;
  width:100%;
  transition:border-color .25s ease,box-shadow .25s ease;
}

.campo textarea{resize:vertical;min-height:130px;line-height:1.65}

.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;
  border-color:var(--burdeos);
  box-shadow:0 0 0 3px rgba(122,31,43,.09);
}

.formulario button{cursor:pointer;font-family:var(--sans)}

.formulario__nota{
  font-family:var(--sans);
  font-size:13px;
  color:var(--tinta-suave);
  margin-top:14px;
}

@media (max-width:900px){
  .envoltorio{padding:0 22px}
  .apertura{padding:56px 0 46px}
}

@media (max-width:600px){
  body{font-size:17px;line-height:1.72;background-attachment:scroll}
  .envoltorio{padding:0 18px}
  .cabecera{padding:28px 0 0}
  .marca{align-items:flex-start;flex-direction:column;gap:8px;padding-bottom:14px}
  .marca__nombre{font-size:clamp(30px,9vw,42px)}
  .marca__lema{padding-bottom:0;font-size:11px;letter-spacing:0.12em}
  .navegacion{gap:16px 18px;font-size:12px;padding:12px 0 0}
  .apertura{padding:40px 0 34px}
  .apertura h1{font-size:clamp(26px,7.4vw,34px);line-height:1.26;margin-bottom:20px}
  .apertura p{font-size:17px}
  .bloque{padding:36px 0}
  .bloque__titulo{font-size:22px;margin-bottom:22px}
  .rejilla{grid-template-columns:1fr}
  .ficha{padding:22px 20px 24px}
  .ficha:hover{transform:none}
  .aviso{padding:22px 20px}
  .texto{padding:38px 0}
  .texto h2{font-size:21px;margin:34px 0 12px}
  .destacado{font-size:19px;padding-left:18px;margin:28px 0}
  .pie{padding:38px 0 24px;margin-top:12px}
  .pie__fila{grid-template-columns:1fr;gap:30px;padding-bottom:28px}
  .pie__raya{flex-direction:column;align-items:flex-start;gap:10px}
  .pie__principio{font-size:15px;max-width:none}
  .pie__principio br{display:none}
  .apertura p,.texto p,.aviso p{text-align:left;hyphens:none}
  .capitular::first-letter{font-size:3.4em;padding:4px 9px 0 0}
  .entradilla{font-size:19px}
  .cita{font-size:22px;padding-left:18px;margin:30px 0}
  .botonera{flex-direction:column}
  .formulario{grid-template-columns:1fr;gap:18px}
  .red{padding:16px 18px}
  .boton{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entra{opacity:1;transform:none;transition:none}
  .pentagrama{background-size:100% 1px;animation:none}
  .ficha,.ficha::before,.navegacion a::after{transition:none}
  .ficha:hover{transform:none}
}