/* Base: una columna estrecha, dos fuentes, pocos colores. */

:root {
  --texto: #272727;
  --texto-suave: #575760;
  --gris: #666;
  --placeholder: #ccc;
  --fondo: #fff;
  --blanco: #fff;
  --enlace: #2E57FF;
  --amarillo: #FFEC00;
  --amarillo-bg: #FFFBC5;
  --amarillo-borde: #FFEA33;
  --arena: #d1cfb6;
  --negro: #202124;
  --ancho: 650px;
  --titulos: "Montserrat", sans-serif;
  --cuerpo: "Quicksand", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  padding-top: 60px;
}

::selection { background: var(--negro); color: #fff; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--enlace); text-decoration: underline; }
a:hover, a:focus { color: var(--texto); }

/* Contenedor */
.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 30px;
}

/* Tipografía */
h1, h2, h3, h4 {
  font-family: var(--titulos);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 20px;
}
h1 { font-size: 2.4em; margin-bottom: 24px; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; margin-top: 40px; margin-bottom: 18px; }
h4 { font-size: 1.2em; }
p + h1, p + h2, p + h3, ul + h2, ol + h2, h2 { margin-top: 50px; }
h1 + h2 { margin-top: 0; }

p { margin: 0 0 1.5em; }
ul, ol { margin: 0 0 1.5em; padding-left: 1.3em; }
li { margin-bottom: 10px; }
strong, b, em, i { font-size: inherit; }

.subtitulo { font-family: var(--cuerpo); font-weight: 400; font-size: 1.1em; opacity: .9; margin-top: 0; }

/* Separador "–" como en una carta */
.guion { margin: 0 0 1.5em; }

/* Resaltado amarillo */
mark { background: var(--amarillo); color: inherit; padding: 0 .1em; }

/* Cita */
blockquote {
  margin: 0 0 1.5em;
  padding: 10px 20px;
  border-left: 3px solid var(--texto);
  color: var(--gris);
}
blockquote p { margin: 0; }

hr { border: 0; border-top: 1px solid var(--texto); margin: 50px 0; width: 100px; }

/* Cabecera del sitio */
.cabecera {
  display: flex;
  justify-content: flex-end;
  max-width: var(--ancho);
  margin: -40px auto 0;
  padding: 0 30px 30px;
}
.menu { position: relative; padding-top: 18px; }
.menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary::before { content: "✕"; }
.menu:not([open]) summary::before { content: "☰"; }
.menu ul {
  position: absolute;
  right: 0;
  top: 50px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background: var(--fondo);
  border: 1px solid var(--texto);
  min-width: 200px;
  z-index: 10;
}
.menu li { margin: 0; }
.menu a {
  display: block;
  padding: 8px 18px;
  font-family: var(--cuerpo);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 15px;
  color: var(--texto);
  text-decoration: none;
}
.menu a:hover { text-decoration: underline; }

/* Cabecera de autor: foto redonda + nombre + lema */
.autor {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 75px;
}
.autor img {
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  border-radius: 50%;
  object-fit: cover;
}
.autor .nombre {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.3;
  margin: 0;
}
.autor .lema { margin: 0; font-size: .9em; }
.autor .lema::before { content: "↳ "; }

/* Botones */
.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 25px;
  margin: 15px 0 10px;
  border: 0;
  background: var(--texto);
  color: #fff;
  font-family: var(--cuerpo);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s ease-in-out;
}
.boton:hover, .boton:focus { background: #000; color: #fff; }

/* Variante pago: rojo plano */
.boton-pago {
  display: inline-block;
  padding: 15px 28px;
  margin: 0 0 20px;
  background: #E3342F;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-family: var(--cuerpo);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.boton-pago:hover { background: #C42A25; color: #fff; }
.boton-pago:active { transform: translateY(1px); }
.boton-pago:focus-visible { outline: 3px solid rgba(227, 52, 47, .35); outline-offset: 3px; }

/* CTA: frase + botón rojo + nota. Se copia tal cual donde haga falta. */
.cta {
  margin: 50px 0;
  padding: 30px 0;
  border-top: 1px solid var(--texto);
  border-bottom: 1px solid var(--texto);
  text-align: center;
}
.cta .cta-texto {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.25;
  margin: 0 0 20px;
}
.cta .boton-pago { margin: 0; }
.cta .cta-nota { font-size: 15px; color: var(--texto-suave); margin: 14px 0 0; }

/* FAQ: preguntas desplegables */
.faq { margin: 0 0 1.5em; border-top: 1px solid var(--texto); }
.faq details { border-bottom: 1px solid var(--texto); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 16px 36px 16px 0;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .95em;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 12px;
  font-family: var(--cuerpo);
  font-weight: 400;
  font-size: 1.3em;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { text-decoration: underline; }
.faq .respuesta { padding: 0 0 6px; }
.faq .respuesta p { margin-bottom: 1em; }

/* Caja destacada (amarilla o arena) */
.caja {
  padding: 24px 32px;
  margin: 0 0 1.5em;
  background: var(--amarillo-bg);
  border: 1px solid var(--amarillo-borde);
}
.caja p:last-child { margin-bottom: 0; }
.caja.arena { background: var(--arena); border: 0; }
.caja .titulo-caja {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .9em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* Newsletter */
.newsletter { margin: 45px 0 25px; }
.caja .newsletter { margin: 0; }
.newsletter .campos {
  display: flex;
  gap: 20px;
}
.newsletter input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--texto);
  border-radius: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 16px;
}
.newsletter input[type="email"]::placeholder { color: var(--placeholder); }
.newsletter .boton { margin: 0; max-width: 260px; }

/* Casilla personalizada */
.casilla {
  position: relative;
  display: block;
  margin-top: 12px;
  padding-left: 24px;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}
.casilla input { position: absolute; opacity: 0; width: 0; height: 0; }
.casilla .marca {
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  height: 15px;
  background: #f4f4f4;
  border: 1px solid var(--texto);
}
.casilla:hover .marca { background: var(--placeholder); }
.casilla input:checked ~ .marca { background: var(--negro); }
.casilla input:checked ~ .marca::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.casilla a { text-decoration: none; }

/* Listado del blog */
.entrada { padding-bottom: 35px; }
.entrada h2 { font-size: 1.1em; margin: 0 0 10px; line-height: 1.2; }
.entrada h2 a { color: var(--texto); text-decoration: none; }
.entrada h2 a:hover { text-decoration: underline; }
.entrada p { margin: 0; }
.paginacion { display: flex; justify-content: space-between; font-size: 16px; margin: 20px 0 60px; }

/* Meta de un post */
.meta { font-size: 14px; color: var(--texto-suave); margin: -12px 0 30px; }

/* Vídeo embebido */
.video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.5em; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Pie */
.pie {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 60px 30px 40px;
}
.pie ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; gap: 20px; flex-wrap: wrap; }
.pie li { margin: 0; }
.pie a {
  color: var(--texto);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
}
.pie a:hover { text-decoration: underline; }
.pie small { font-size: 13px; color: var(--texto-suave); }

@media (max-width: 768px) {
  body { font-size: 18px; }
  body { padding-top: 40px; }
  .cabecera { margin-top: -30px; padding: 0 20px 20px; }
  .contenedor, .pie { padding-left: 20px; padding-right: 20px; }
  h1 { font-size: 2em; }
  .autor { gap: 14px; margin-bottom: 30px; }
  .autor img { width: 90px; height: 90px; flex-basis: 90px; }
  .newsletter .campos { flex-direction: column; gap: 10px; }
  .newsletter .boton { max-width: none; }
  .caja { padding: 20px; }
}