/* =====================================================================
   Estilos del sitio público (prompt 4b): Dulce, Fuerte, Urbano y Limpio.
   El servidor pone en <html> data-estilo, data-letras y data-intensidad, y
   las letras y colores como variables (src/estilos.js). Aquí va solo la
   FORMA de cada estilo. Regla de siempre: ningún color fijo, todo var(--…).
   Adornos pocos y ligeros: marco desfasado, separador con ornamento y
   franja frase + foto.
   ===================================================================== */

/* Sin negritas ni cursivas «falsas» cuando una letra no las trae. */
html[data-estilo] { font-synthesis: none; }

/* --------------------------------------------------------------- Piezas para todas las páginas
   (las usa la portada de la parte 2; aquí ya quedan listas) */

/* Separador con ornamento al centro:  ───── • ───── */
.separador {
  display: block; width: min(220px, 60%); height: 11px; margin: 22px auto; border: 0;
  background:
    radial-gradient(circle, var(--dorado) 0 3px, transparent 3.5px) center / 11px 11px no-repeat,
    linear-gradient(var(--dorado), var(--dorado)) left center / calc(50% - 14px) 1px no-repeat,
    linear-gradient(var(--dorado), var(--dorado)) right center / calc(50% - 14px) 1px no-repeat;
}

/* Foto con marco de línea desfasado */
.marco-desfasado { position: relative; isolation: isolate; }
.marco-desfasado::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transform: translate(10px, 10px);
  border: 2px solid var(--dorado); border-radius: var(--radio);
  pointer-events: none;
}

/* Franja frase + foto: rompe el ritmo entre bloques */
.franja {
  display: grid; gap: 18px; align-items: center;
  margin: 34px 0; padding: 26px 18px;
  background: var(--papel); border-radius: var(--radio);
}
.franja__frase { margin: 0; font-family: var(--f-titulo); font-size: clamp(26px, 6vw, 40px); line-height: 1.1; color: var(--cacao); }
.franja__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }
@media (min-width: 720px) { .franja { grid-template-columns: 1.1fr 1fr; padding: 34px; } }

/* La palabra que resalta (Mi estilo) */
.resalta { color: var(--enlace); }

/* --------------------------------------------------------------- Dulce
   Serif elegante + manuscrita. La palabra que resalta va en la manuscrita.
   Adorno fino debajo de los títulos grandes. */
[data-estilo="dulce"] :is(.tienda__hero, .informacion__hero, .sigue__hero) h1::after,
[data-estilo="dulce"] .seccion__titulo::after {
  content: ''; display: block; width: 120px; height: 11px; margin: 10px auto 0;
  background:
    radial-gradient(circle, var(--dorado) 0 2.5px, transparent 3px) center / 11px 11px no-repeat,
    linear-gradient(var(--dorado), var(--dorado)) left center / 46px 1px no-repeat,
    linear-gradient(var(--dorado), var(--dorado)) right center / 46px 1px no-repeat;
}

/* --------------------------------------------------------------- Fuerte
   Mayúsculas condensadas y gruesas, esquinas casi rectas, y el nombre de la
   marca gigante y casi transparente detrás del título de la portada. */
[data-estilo="fuerte"] { --radio: 6px; }
[data-estilo="fuerte"] :is(h1, h2, h3, .marca__nombre-simple, .precio-etiqueta, .boton, .etiqueta) {
  text-transform: uppercase; letter-spacing: .03em;
}
[data-estilo="fuerte"] :is(h1, h2, h3) { line-height: 1; }
[data-estilo="fuerte"] :is(.tienda__hero, .informacion__hero, .sigue__hero) h1 { font-size: clamp(46px, 11vw, 76px); }
[data-estilo="fuerte"] .seccion__titulo { font-size: clamp(34px, 8vw, 48px); }
/* La «mano» no es manuscrita aquí: misma letra del título, en el color de acento */
[data-estilo="fuerte"] .mano { font-family: var(--f-titulo); font-size: 1em !important; color: var(--enlace); }
[data-estilo="fuerte"] :is(.tienda__hero, .informacion__hero) { position: relative; isolation: isolate; overflow: hidden; }
[data-estilo="fuerte"] :is(.tienda__hero, .informacion__hero)::before {
  content: var(--marca-fondo, '');
  position: absolute; inset: 0; z-index: -1;
  display: grid; place-items: center;
  font-family: var(--f-titulo); font-size: clamp(80px, 22vw, 240px); line-height: .85;
  text-transform: uppercase; white-space: nowrap;
  color: var(--tinta); opacity: .06; pointer-events: none;
}
[data-estilo="fuerte"] .precio-etiqueta { clip-path: none; padding: 3px 10px; color: var(--texto-claro); background: var(--chocolate); }
[data-estilo="fuerte"] .precio-etiqueta::before { display: none; }

/* --------------------------------------------------------------- Urbano
   Geométrica gruesa, bordes marcados con sombra desplazada y marco de línea
   desfasado en las fotos. */
[data-estilo="urbano"] { --radio: 10px; --sombra: 5px 5px 0 var(--tinta); }
[data-estilo="urbano"] :is(.producto, .tarjeta, .tarjeta-info, .seccion--tarjeta, .tarjeta-hecho, .caja) {
  border: 2px solid var(--tinta); box-shadow: var(--sombra);
}
[data-estilo="urbano"] .producto:hover { box-shadow: 8px 8px 0 var(--tinta); }
[data-estilo="urbano"] .boton { border: 2px solid var(--tinta); border-radius: var(--radio); box-shadow: 3px 3px 0 var(--tinta); }
[data-estilo="urbano"] .boton:not(.boton--secundario, .boton--peligro, .boton--whats) { background: var(--chocolate); }
[data-estilo="urbano"] .chip { border-width: 2px; border-color: var(--tinta); }
[data-estilo="urbano"] .mano { font-family: var(--f-titulo); font-size: 1em !important; color: var(--enlace); }
[data-estilo="urbano"] .marco-foto { margin: 10px 10px 0; }
[data-estilo="urbano"] .marco-foto::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  transform: translate(6px, 6px);
  border: 2px solid var(--dorado); border-radius: calc(var(--radio) - 4px);
  pointer-events: none;
}
[data-estilo="urbano"] .marco-foto :is(img, .marco-foto__boton) { position: relative; z-index: 1; }
[data-estilo="urbano"] .marco-foto::after { display: none; }
[data-estilo="urbano"] .precio-etiqueta { clip-path: none; padding: 2px 10px; border: 2px solid var(--tinta); border-radius: 999px; }
[data-estilo="urbano"] .precio-etiqueta::before { display: none; }

/* --------------------------------------------------------------- Limpio
   Mucho blanco, un acento, líneas finas y sin adornos. */
[data-estilo="limpio"] { --radio: 6px; --sombra: none; }
[data-estilo="limpio"] body { background-image: none; }
[data-estilo="limpio"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: -.01em; }
[data-estilo="limpio"] :is(.producto, .tarjeta, .tarjeta-info, .seccion--tarjeta, .tarjeta-hecho, .caja) {
  border: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); box-shadow: none;
}
[data-estilo="limpio"] .tarjeta-info { border-left-width: 1px; }
[data-estilo="limpio"] .boton { border-radius: var(--radio); box-shadow: none; }
[data-estilo="limpio"] .boton:not(.boton--secundario, .boton--peligro, .boton--whats) { background: var(--chocolate); }
[data-estilo="limpio"] .boton::after { display: none; }
[data-estilo="limpio"] .mano { font-family: var(--f-titulo); font-size: 1em !important; color: var(--enlace); }
[data-estilo="limpio"] .marco-foto::after { display: none; }
[data-estilo="limpio"] .precio-etiqueta { clip-path: none; padding: 0; color: var(--tinta); background: none; }
[data-estilo="limpio"] .precio-etiqueta::before { display: none; }

/* --------------------------------------------------------------- Intensidad Fuerte
   Página oscura: los colores ya llegan cambiados (fondo, tarjetas y casillas
   oscuras). Aquí, solo lo que no es color: sin grano de papel y el fondo a
   toda la página un poco más presente detrás de la capa oscura. */
[data-intensidad="fuerte"] body { background-image: none; }
[data-intensidad="fuerte"] { color-scheme: dark; }
[data-intensidad="fuerte"] .decoracion-fondo-completo { filter: brightness(.55) saturate(1.05); }
[data-intensidad="fuerte"] :is(input, select, textarea)::placeholder { color: var(--tinta-suave); }

/* --------------------------------------------------------------- El panel también se viste
   Mismas letras, colores y forma que la página. Aquí solo lo que es del panel:
   títulos, menú y barras. Todo sigue grande y legible para el celular. */
[data-estilo="fuerte"] :is(.lateral__nombre, .mosaico__titulo, .marca-previa__nombre, .inicio-bloque__titulo, .titulo-seccion, .lateral__titulo, .hoja-mas__titulo) {
  text-transform: uppercase; letter-spacing: .03em;
}
[data-estilo="fuerte"] :is(.barra, .cabecera) { box-shadow: 0 3px 0 var(--chocolate); }
[data-estilo="fuerte"] .abajo { box-shadow: 0 -3px 0 var(--chocolate); }
[data-estilo="fuerte"] :is(.abajo__enlace[aria-current="page"], .abajo__enlace--activo)::after { background: var(--chocolate); }
[data-estilo="fuerte"] .lateral__enlace[aria-current="page"] { border-left-width: 4px; }
[data-estilo="fuerte"] .vista h1 { font-size: clamp(34px, 8vw, 46px); }
[data-estilo="fuerte"] .saludo h1 { font-size: clamp(36px, 9vw, 52px); }
[data-estilo="fuerte"] .marca-previa__subtitulo { font-family: var(--f-titulo); text-transform: uppercase; }
/* Avisos claros sobre fondo oscuro */
[data-intensidad="fuerte"] .aviso--info { color: var(--tinta); background: color-mix(in srgb, var(--chocolate) 22%, var(--papel)); border-color: var(--chocolate); }
[data-intensidad="fuerte"] .ayuda-pantalla { color: var(--tinta); }
[data-estilo="urbano"] :is(.barra, .cabecera) { box-shadow: 0 3px 0 var(--chocolate); }
[data-estilo="limpio"] :is(.barra, .cabecera) { box-shadow: 0 1px 0 color-mix(in srgb, var(--tinta) 15%, transparent); }
/* Sobre fondo oscuro: bordes que se vean y avisos de «por hacer» legibles */
[data-intensidad="fuerte"] :is(.opcion-tarjeta, .chip, input, select, textarea) { border-color: color-mix(in srgb, var(--tinta) 28%, transparent); }
[data-intensidad="fuerte"] .lista-completar li { background: var(--papel); border-color: color-mix(in srgb, var(--alerta) 70%, transparent); border-left: 4px solid var(--alerta); }
[data-intensidad="fuerte"] .aviso-vivo--cuidado { color: var(--tinta); background: var(--papel); border-left: 4px solid var(--alerta); }

/* --------------------------------------------------------------- Adornos dulces
   El moño de la tapa (pantallas de entrar y la portada provisional) solo
   existe en Dulce. En los demás estilos, la tapa queda lisa. */
[data-estilo]:not([data-estilo="dulce"]) .caja__mono { display: none; }
/* Sin moño tampoco hay listón: la tapa queda como una franja lisa del color de acento. */
[data-estilo]:not([data-estilo="dulce"]) .caja__tapa { height: 12px; background: var(--chocolate); }
[data-estilo]:not([data-estilo="dulce"]) .caja__tapa::before { display: none; }
[data-estilo]:not([data-estilo="dulce"]) .caja::after { inset: 22px 10px 10px; }

/* --------------------------------------------------------------- Nombre y frase de la marca
   En Dulce la frase (subtítulo) va al lado del nombre, en manuscrita. En los
   estilos sin manuscrita va DEBAJO del nombre, más chica, en una sola
   columna: centrada en la portada, la entrada y el pie; a la izquierda en
   las barras de arriba. */
[data-estilo]:not([data-estilo="dulce"]) .marca { flex-direction: column; gap: 4px; text-align: center; }
[data-estilo]:not([data-estilo="dulce"]) :is(.cabecera, .barra) .marca { align-items: flex-start; text-align: left; gap: 0; }
[data-estilo]:not([data-estilo="dulce"]) .marca__subtitulo {
  margin-left: 0; font-family: var(--f-titulo); font-size: 15px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--enlace);
}
[data-estilo]:not([data-estilo="dulce"]) :is(.cabecera, .barra) .marca__subtitulo { font-size: 11px; }