/* josesilverio.com — hoja de estilos única.
   Identidad: DECISIONES.md §4 (verde-negro, dorado, crema, verde azulado; Lora + Inter).
   Lenguaje: editorial, sobrio, mucho aire, una sola llamada a la acción por pantalla.
   Móvil primero (390 px); escritorio a partir de 48rem. Rediseño del 16 sep 2026 (Cowork). */

:root {
  --verde-negro: #07100F;
  --verde-profundo: #0B1716;
  --dorado: #B8862B;
  --dorado-claro: #E3C27A;
  --dorado-suave: #F1DFB4;
  --crema: #F6F1E7;
  --papel: #FBF7EF;
  --verde-azulado: #0F4C5C;

  --texto: #101A19;
  --texto-suave: #4A5553;
  --linea: rgba(7, 16, 15, .12);
  --linea-dorada: rgba(184, 134, 43, .45);

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ancho: 72rem;
  --ancho-texto: 40rem;
  --margen: 1.25rem;
  --radio: 8px;
  --radio-grande: 16px;
  --sombra: 0 1px 2px rgba(7, 16, 15, .06), 0 24px 48px -32px rgba(7, 16, 15, .35);
  --transicion: 180ms cubic-bezier(.2, .7, .2, 1);
  --grano-suave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font: 400 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--dorado-claro); color: var(--verde-negro); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; margin: 0 0 1rem; color: var(--verde-negro); text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 4vw + 1.2rem, 4rem); }
h2 { font-size: clamp(1.65rem, 1.6vw + 1.1rem, 2.4rem); line-height: 1.12; }
h3 { font-size: 1.25rem; line-height: 1.25; }
p, ul, ol { margin: 0 0 1.1rem; }
a { color: var(--verde-azulado); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--transicion); }
a:hover { color: var(--verde-negro); }
:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; border-radius: 2px; }
strong { font-weight: 600; color: var(--verde-negro); }
small { font-size: .875rem; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--verde-negro); color: var(--crema); padding: .75rem 1rem; z-index: 50; }
.saltar:focus { left: 0; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.estrecha { max-width: calc(var(--ancho-texto) + 2 * var(--margen)); }
.seccion { padding: 4.5rem 0; position: relative; }
.seccion + .seccion:not(.oscuro) { padding-top: 0; }
.centro { text-align: center; }

/* Antetítulo: letras pequeñas, espaciadas, con una raya dorada delante */
.antetitulo {
  display: flex; align-items: center; gap: .75rem;
  font: 600 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dorado); margin: 0 0 1.1rem;
}
.antetitulo::before { content: ""; width: 1.75rem; height: 1px; background: var(--dorado); flex: none; }
.centro .antetitulo { justify-content: center; }
.centro .antetitulo::before { display: none; }

.entrada { font-size: 1.2rem; line-height: 1.6; color: var(--texto-suave); max-width: 40rem; }
.pequeno { font-size: .9rem; color: var(--texto-suave); line-height: 1.55; }
.firma { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--verde-negro); }
.texto-largo p { margin-bottom: 1.25rem; }
.texto-largo h2 { margin-top: 2.5rem; }

/* ---------- fondo oscuro ---------- */
.oscuro { background: var(--verde-negro); color: #E8E1D3; position: relative; isolation: isolate; }
.oscuro::before { content: ""; position: absolute; inset: 0; background: var(--grano); opacity: .07; pointer-events: none; z-index: 0; }
.oscuro > * { position: relative; z-index: 1; }
.oscuro h1, .oscuro h2, .oscuro h3, .oscuro strong { color: var(--crema); }
.oscuro a:not(.boton) { color: var(--dorado-claro); }
.oscuro a:not(.boton):hover { color: var(--crema); }
.oscuro .antetitulo { color: var(--dorado-claro); }
.oscuro .antetitulo::before { background: var(--dorado-claro); }
.oscuro .entrada, .oscuro .pequeno { color: #C9C1B0; }
.oscuro.seccion { padding: 5rem 0; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(7, 16, 15, .86);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(227, 194, 122, .18);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; }
.marca { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; letter-spacing: .01em; color: var(--crema); text-decoration: none; padding: .5rem 0; white-space: nowrap; transition: color var(--transicion); }
.marca:hover { color: var(--dorado-claro); }
.cabecera nav { display: flex; gap: .25rem; }
.cabecera nav a { color: rgba(246, 241, 231, .82); text-decoration: none; font: 500 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: .9rem .45rem; transition: color var(--transicion); }
.cabecera nav a:hover { color: var(--dorado-claro); }

/* ---------- pie ---------- */
.pie { background: var(--verde-negro); color: #B9B1A1; padding: 3rem 0 2.5rem; font-size: .9rem; border-top: 1px solid rgba(227, 194, 122, .18); }
.pie a { color: var(--crema); text-decoration: none; }
.pie a:hover { color: var(--dorado-claro); }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; align-items: center; margin-bottom: .5rem; }
.pie-enlaces strong { font-family: var(--serif); font-weight: 600; color: var(--crema); width: 100%; font-size: 1.2rem; margin-bottom: .5rem; }
.pie-enlaces a { padding: .55rem 0; }
.pie-legal { margin: 1rem 0 0; font-size: .8rem; line-height: 1.6; color: #8F887A; }
.pie-legal a { color: #B9B1A1; text-decoration: underline; }

/* ---------- botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .9rem 1.6rem; width: 100%;
  border: 1.5px solid var(--verde-negro); border-radius: var(--radio);
  background: var(--verde-negro); color: var(--crema);
  font: 600 1rem/1.2 var(--sans); letter-spacing: .005em; text-align: center; text-decoration: none; cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(7, 16, 15, .6); color: var(--crema); }
.boton:active { transform: translateY(0); box-shadow: none; }
.boton.secundario { background: transparent; color: var(--verde-negro); }
.boton.secundario:hover { background: rgba(7, 16, 15, .06); color: var(--verde-negro); box-shadow: none; }
.boton[disabled] { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.acciones { margin: 1.75rem 0 .75rem; }

/* Botón dorado: en fondos oscuros y en el panel del gesto */
.oscuro .boton, .gesto .boton, .portada .boton {
  background: linear-gradient(135deg, #EBCB86 0%, var(--dorado-claro) 45%, var(--dorado) 100%);
  border-color: transparent; color: var(--verde-negro);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.oscuro .boton:hover, .gesto .boton:hover, .portada .boton:hover { color: var(--verde-negro); box-shadow: 0 14px 30px -14px rgba(227, 194, 122, .55); filter: brightness(1.04); }
.oscuro .boton.secundario, .gesto .boton.secundario {
  background: transparent; border-color: rgba(246, 241, 231, .45); color: var(--crema); box-shadow: none; filter: none;
}
.oscuro .boton.secundario:hover, .gesto .boton.secundario:hover { border-color: var(--dorado-claro); color: var(--dorado-claro); background: rgba(227, 194, 122, .08); }

/* Enlaces de tarjeta con flecha */
.empuje a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.empuje a::after { content: "→"; transition: transform var(--transicion); }
.empuje a:hover::after { transform: translateX(4px); }

/* ---------- portada del hub ---------- */
.portada { position: relative; isolation: isolate; overflow: hidden; background: var(--verde-negro); color: var(--crema); }
/* La foto (banda sin texto de la portada del libro). En móvil ocupa todo; en escritorio, la mitad derecha. */
.portada::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url(/img/cartera.webp) center 58% / cover no-repeat;
  opacity: 1; /* anula el grano de .oscuro::before cuando la portada también lleva .oscuro */
}
/* Velo para leer encima + grano */
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 16, 15, .62) 0%, rgba(7, 16, 15, .38) 40%, rgba(7, 16, 15, .9) 100%),
    var(--grano-suave);
}
.portada > * { position: relative; z-index: 1; }
.portada .seccion { padding: 5.5rem 0 5rem; }
.portada .envoltura.estrecha { max-width: calc(46rem + 2 * var(--margen)); margin-left: auto; margin-right: auto; }
.portada h1 { color: var(--crema); font-size: clamp(2.6rem, 5vw + 1rem, 4.75rem); margin-bottom: 1.25rem; text-shadow: 0 2px 24px rgba(7, 16, 15, .45); }
.portada .antetitulo { color: var(--dorado-claro); }
.portada .antetitulo::before { background: var(--dorado-claro); }
.portada .entrada { color: #DCD5C6; font-size: 1.2rem; max-width: 34rem; }
.portada .pequeno { color: rgba(246, 241, 231, .68); max-width: 30rem; }
.portada .boton { width: auto; min-width: 16rem; }

/* ---------- rejillas y tarjetas ---------- */
.rejilla { display: grid; gap: 1.25rem; }
.tarjeta {
  position: relative; display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-grande);
  padding: 1.75rem; box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta::before { content: ""; position: absolute; left: 1.75rem; right: 1.75rem; top: 0; height: 2px; background: linear-gradient(90deg, var(--dorado), rgba(184, 134, 43, 0)); border-radius: 2px; }
.tarjeta:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(7, 16, 15, .05), 0 32px 56px -34px rgba(7, 16, 15, .45); border-color: var(--linea-dorada); }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta .boton { margin-top: auto; }
.tarjeta h2, .tarjeta h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.tarjeta .antetitulo { margin-bottom: 1rem; }
.tarjeta .empuje { margin-top: auto; padding-top: .5rem; }
.tarjeta p + .boton { margin-top: 1.25rem; }
.oscuro .tarjeta { background: rgba(255, 255, 255, .04); border-color: rgba(227, 194, 122, .2); box-shadow: none; }
.oscuro .tarjeta h2, .oscuro .tarjeta h3 { color: var(--crema); }

.estado { display: inline-flex; align-items: center; gap: .5rem; font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 1rem; }
.estado::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #B9B1A1; }
.estado.disponible { color: var(--verde-azulado); }
.estado.disponible::before { background: var(--verde-azulado); box-shadow: 0 0 0 4px rgba(15, 76, 92, .15); }

/* ---------- autor ---------- */
.autor { display: grid; gap: 1.5rem; align-items: start; }
.foto { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--crema), 0 0 0 4.5px var(--dorado); }
.autor .foto { margin: .35rem 0 0; }
.foto-retrato { width: 100%; max-width: 20rem; aspect-ratio: 960 / 1199; object-fit: cover; border-radius: var(--radio-grande); box-shadow: var(--sombra); margin: 0 0 2rem; }
.autor p:last-child a { font-weight: 600; text-decoration: none; }
.autor p:last-child a::after { content: " →"; }

/* ---------- libro ---------- */
.libro-cabecera { display: grid; gap: 2.5rem; align-items: center; }
.portada-libro {
  width: 100%; max-width: 15rem; aspect-ratio: 2 / 3; border-radius: 4px;
  box-shadow: 0 30px 60px -28px rgba(7, 16, 15, .55), 0 0 0 1px rgba(7, 16, 15, .06);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.libro-cabecera .portada-libro { margin: 0 auto; }
.tarjeta .portada-libro { max-width: 10rem; margin: 0 0 1.5rem; }
.partes { padding-left: 2.5rem; }
.partes li { margin-bottom: .5rem; padding-left: .25rem; }
.partes li::marker { font-family: var(--serif); font-weight: 600; color: var(--dorado); }

/* ---------- listas ---------- */
.lista-marcas { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.lista-marcas li { position: relative; padding-left: 1.75rem; margin-bottom: .75rem; }
.lista-marcas li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .55rem; height: .55rem; background: var(--dorado); transform: rotate(45deg); border-radius: 1px; }

.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.pasos li { counter-increment: paso; position: relative; padding: 1rem 1.25rem 1rem 4rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.pasos li::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 1.1rem; top: .9rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--dorado); line-height: 1; }

/* Imagen que todavía no existe (build.js la sustituye) */
.img-pendiente { background: repeating-linear-gradient(45deg, #E9E1D1, #E9E1D1 10px, #F1EBDF 10px, #F1EBDF 20px); border: 1px dashed var(--linea); border-radius: var(--radio); }
.img-pendiente.foto { width: 7.5rem; height: 7.5rem; border-radius: 50%; }
.img-pendiente.portada-libro { box-shadow: none; }

/* ---------- el gesto: panel oscuro con el formulario ---------- */
.gesto {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--verde-profundo); color: #E8E1D3;
  border: 1px solid rgba(227, 194, 122, .28); border-radius: var(--radio-grande);
  padding: 1.75rem 1.5rem; margin: 2rem 0;
  box-shadow: 0 40px 80px -48px rgba(7, 16, 15, .7);
}
.gesto::before { content: ""; position: absolute; inset: 0; background: var(--grano); opacity: .08; pointer-events: none; z-index: 0; }
.gesto::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 2px; background: linear-gradient(90deg, var(--dorado-claro), rgba(227, 194, 122, 0)); z-index: 1; }
.gesto > * { position: relative; z-index: 1; }
.gesto-titulo { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--crema); margin-bottom: 1.25rem; letter-spacing: -.01em; }
.gesto a:not(.boton) { color: var(--dorado-claro); }
.gesto .consentimiento { color: rgba(232, 225, 211, .68); }
.gesto .separador { color: rgba(232, 225, 211, .6); }
.gesto .separador::before, .gesto .separador::after { border-top-color: rgba(227, 194, 122, .28); }
.gesto .campo label { color: var(--crema); }
.gesto .campo input {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(246, 241, 231, .28); color: var(--crema);
}
.gesto .campo input::placeholder { color: rgba(232, 225, 211, .45); }
.gesto .campo input:focus { border-color: var(--dorado-claro); background: rgba(255, 255, 255, .09); outline: none; box-shadow: 0 0 0 3px rgba(227, 194, 122, .22); }
.gesto .mensaje-formulario { color: var(--dorado-suave); }

/* ---------- formularios (base) ---------- */
.campo { margin-bottom: 1rem; }
.campo label, .casillas legend { display: block; font-weight: 600; margin-bottom: .45rem; font-size: .95rem; }
.campo input {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem;
  border: 1px solid #A39C8C; border-radius: var(--radio); background: #fff;
  font: 400 1rem var(--sans); color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus { outline: none; border-color: var(--verde-azulado); box-shadow: 0 0 0 3px rgba(15, 76, 92, .15); }
.separador { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0; color: var(--texto-suave); font-size: .9rem; }
.separador::before, .separador::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }
.casillas { border: 0; padding: 0; margin: 0 0 1rem; }
.casillas label { display: flex; align-items: center; gap: .85rem; min-height: 3rem; padding: .35rem .6rem; border-radius: var(--radio); cursor: pointer; transition: background var(--transicion); }
.casillas label:hover { background: rgba(7, 16, 15, .04); }
.casillas input { width: 1.25rem; height: 1.25rem; accent-color: var(--verde-azulado); flex: none; }
.casillas label.sugerida { background: var(--dorado-suave); }
.consentimiento { font-size: .85rem; color: var(--texto-suave); margin: 1.1rem 0 0; line-height: 1.55; }
.mensaje-formulario { margin-top: 1rem; font-weight: 600; }
.mensaje-formulario[hidden] { display: none; }
.oculto { position: absolute !important; left: -9999px !important; }

/* iPhone: se resalta la línea de iPhone */
.solo-iphone { display: none; }
.es-iphone .solo-iphone { display: block; }
.es-iphone .aviso-iphone { background: var(--dorado-suave); padding: .75rem 1rem; border-radius: var(--radio); }

/* ---------- escritorio ---------- */
@media (min-width: 48rem) {
  :root { --margen: 2rem; }
  .seccion { padding: 6.5rem 0; }
  .oscuro.seccion { padding: 6.5rem 0; }
  .boton { width: auto; }
  .cabecera nav a { font-size: .78rem; letter-spacing: .14em; padding: .9rem .6rem; }
  .rejilla { gap: 1.75rem; }
  .rejilla.tres { grid-template-columns: repeat(3, 1fr); }
  .rejilla.dos { grid-template-columns: repeat(2, 1fr); }
  .tarjeta { padding: 2rem; }
  .autor { grid-template-columns: auto 1fr; gap: 2.5rem; }
  .libro-cabecera { grid-template-columns: 18rem 1fr; gap: 4rem; }
  .libro-cabecera .portada-libro { max-width: 18rem; transform: perspective(1200px) rotateY(-8deg); }
  .libro-cabecera .portada-libro:hover { transform: perspective(1200px) rotateY(0deg); }
  .partes { columns: 2; column-gap: 3rem; }
  .pie-enlaces strong { width: auto; margin: 0 .75rem 0 0; }
  .gesto { padding: 2.5rem; }
  .gesto .boton, .gesto .boton.secundario { width: 100%; }
  .portada::before { left: 44%; background-position: 50% 56%; }
  .portada::after {
    background:
      linear-gradient(90deg, var(--verde-negro) 44%, rgba(7, 16, 15, .88) 52%, rgba(7, 16, 15, .35) 66%, rgba(7, 16, 15, .05) 84%, rgba(7, 16, 15, 0) 100%),
      linear-gradient(180deg, rgba(7, 16, 15, .2) 0%, rgba(7, 16, 15, 0) 40%, rgba(7, 16, 15, .55) 100%),
      var(--grano-suave);
  }
  .portada .seccion { padding: 8rem 0 7.5rem; min-height: 80vh; display: flex; align-items: center; }
  .portada .envoltura.estrecha { max-width: none; width: auto; margin: 0; padding-left: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen))); padding-right: 0; }
  .portada h1, .portada .entrada, .portada .pequeno { max-width: 36rem; }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .pasos li { padding: 3.25rem 1.25rem 1.25rem 1.25rem; }
  .pasos li::before { left: 1.25rem; top: 1.1rem; font-size: 1.6rem; }
}
@media (min-width: 64rem) {
  .portada h1 { max-width: 14ch; }
}