/* ==========================================================================
   PUBLIPOCHI — estilos
   Referencia visual: rótulo pintado a mano de la costa ecuatoriana.
   Colores planos, bordes gruesos, sombra dura desplazada.
   ========================================================================== */

:root {
  --tinta:    #0E1B33;
  --tinta-alt:#16294A;
  --sombra:   #050B18;
  --crema:    #F6EBD6;
  --amarillo: #FFC21A;
  --rojo:     #E33629;
  --agua:     #17B3A3;

  --borde: 3px solid var(--tinta);
  --radio: 14px;
  --col: 460px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--crema);
  background-color: var(--tinta);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--tinta) 0 22px,
    var(--tinta-alt) 22px 44px
  );
}

/* Columna central: el sitio está pensado para el navegador de Facebook,
   así que en escritorio se mantiene el mismo ancho de teléfono. */
.telon {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 28px 20px 48px;
}

/* --- Cabecera ------------------------------------------------------------ */

.marca {
  text-align: center;
  margin-bottom: 26px;
}

.marca__nombre {
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: clamp(2.4rem, 13vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--crema);
  text-shadow: 4px 4px 0 var(--rojo), 8px 8px 0 var(--sombra);
}

.marca__cinta {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 18px 6px;
  background: var(--amarillo);
  color: var(--tinta);
  font-weight: 700;
  font-size: .92rem;
  border: var(--borde);
  border-radius: 4px;
  transform: rotate(-1.6deg);
  box-shadow: 4px 4px 0 var(--sombra);
}

.entrada { animation: sello .45s cubic-bezier(.2,1.3,.4,1) both; }

@keyframes sello {
  from { transform: scale(.88); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* --- Ficha del creador --------------------------------------------------- */

.ficha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  text-align: center;
}

.ficha__retrato {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: var(--borde);
  box-shadow: 5px 5px 0 var(--sombra);
  object-fit: cover;
  background: var(--amarillo);
  display: grid;
  place-items: center;
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: 2.2rem;
  color: var(--tinta);
}

.ficha__nombre {
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: 1.55rem;
  margin: 4px 0 0;
  line-height: 1.1;
}

.ficha__alias { margin: 0; color: var(--agua); font-weight: 600; font-size: .95rem; }

.ficha__frase {
  margin: 6px 0 0;
  font-size: .95rem;
  color: rgba(246,235,214,.78);
  max-width: 34ch;
}

/* --- Redes --------------------------------------------------------------- */

.redes {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.redes__item {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--crema);
  color: var(--tinta);
  border: var(--borde);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--sombra);
  transition: transform .1s ease, box-shadow .1s ease;
}

.redes__item svg { width: 25px; height: 25px; }

/* --- Placas (botones grandes) -------------------------------------------- */

.lista { display: flex; flex-direction: column; gap: 15px; }

.placa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  text-decoration: none;
  background: var(--crema);
  color: var(--tinta);
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: 6px 6px 0 var(--sombra);
  transition: transform .1s ease, box-shadow .1s ease;
}

.placa--amarillo { background: var(--amarillo); }
.placa--agua     { background: var(--agua); }
.placa--rojo     { background: var(--rojo); color: var(--crema); }

.placa__icono {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(14,27,51,.12);
}

.placa--rojo .placa__icono { background: rgba(246,235,214,.2); }
.placa__icono svg { width: 23px; height: 23px; }

.placa__texto { min-width: 0; }
.placa__titulo { display: block; font-weight: 700; font-size: 1.06rem; line-height: 1.25; }
.placa__detalle { display: block; font-size: .86rem; opacity: .75; margin-top: 2px; }

/* Pulsación: el botón se hunde. Es respuesta a una acción, no decoración. */
.placa:active, .redes__item:active, .boton:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--sombra);
}

/* --- Botones genéricos ---------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  background: var(--amarillo);
  color: var(--tinta);
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: 6px 6px 0 var(--sombra);
  transition: transform .1s ease, box-shadow .1s ease;
}

.boton svg { width: 24px; height: 24px; }
.boton--verde { background: #25D366; }
.boton--azul  { background: #35ADE3; }
.boton--fino  { background: transparent; color: var(--crema); border-color: rgba(246,235,214,.45); box-shadow: none; font-weight: 600; font-size: .95rem; padding: 12px 16px; }

.par { display: flex; gap: 10px; }
.par .boton { width: auto; flex: 1; }

/* --- Tarjetas de promo ---------------------------------------------------- */

.promo {
  background: var(--crema);
  color: var(--tinta);
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: 7px 7px 0 var(--sombra);
  padding: 20px 18px;
  margin-bottom: 20px;
}

.promo__nombre {
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: 1.35rem;
  margin: 0 0 6px;
  line-height: 1.15;
}

.promo__desc { margin: 0 0 16px; font-size: .96rem; }

.promo__codigo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(14,27,51,.07);
  border: 2px dashed rgba(14,27,51,.35);
  border-radius: 10px;
}

.promo__codigo strong {
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: .04em;
  flex: 1;
}

.copiar {
  font: inherit;
  font-weight: 700;
  font-size: .85rem;
  padding: 7px 12px;
  cursor: pointer;
  background: var(--tinta);
  color: var(--crema);
  border: none;
  border-radius: 8px;
}

.promo__nota { margin: 12px 0 0; font-size: .85rem; opacity: .7; }

.promo--cerrada { background: rgba(246,235,214,.12); color: var(--crema); border-color: rgba(246,235,214,.4); box-shadow: none; }
.promo--cerrada .promo__desc { opacity: .8; }

/* --- Bloques de texto ----------------------------------------------------- */

.bloque { margin-top: 34px; }

.bloque__titulo {
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: 1.15rem;
  margin: 0 0 12px;
  color: var(--amarillo);
}

.puntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.puntos li {
  display: flex;
  gap: 11px;
  font-size: .93rem;
  color: rgba(246,235,214,.85);
  line-height: 1.45;
}

.puntos svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; color: var(--agua); }

.aviso {
  margin-top: 30px;
  padding: 16px;
  border: 2px solid var(--rojo);
  border-radius: var(--radio);
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(246,235,214,.88);
}

.aviso strong { color: var(--rojo); }

.pie {
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(246,235,214,.18);
  text-align: center;
  font-size: .82rem;
  color: rgba(246,235,214,.6);
}

.pie a { color: rgba(246,235,214,.85); }

.volver {
  display: inline-block;
  margin-bottom: 18px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--agua);
  text-decoration: none;
}

/* --- Puerta de edad ------------------------------------------------------- */

.puerta {
  background: var(--crema);
  color: var(--tinta);
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: 7px 7px 0 var(--sombra);
  padding: 26px 20px;
  text-align: center;
}

.puerta__titulo {
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: 1.5rem;
  margin: 0 0 8px;
  line-height: 1.15;
}

.puerta__texto { margin: 0 0 20px; font-size: .95rem; }
.puerta .par { margin-top: 4px; }
.puerta .boton--fino { color: var(--tinta); border-color: rgba(14,27,51,.4); }

.oculto { display: none !important; }

/* --- Accesibilidad y detalles -------------------------------------------- */

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 3px;
}

.solo-lector {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}