@font-face {
    font-family: "DayPosterShadow";
    src: url("assets/fonts/DayPosterShadowNF.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* LLAMA AL CALVO — anuncio web estadounidense de finales de los 90 */
:root{
  --amarillo:#f4e817;
  --amarillo-claro:#ffdf35;
  --rojo:#c82026;
  --rojo-claro:#ef382e;
  --azul:#2455a4;
  --azul-oscuro:#102d63;
  --negro:#111111;
  --blanco:#ffffff;
  --papel:#fffbe0;
  --sombra:7px 7px 0 var(--negro);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:18px}
body{
  margin:0;min-height:100vh;padding:22px 14px 44px;
  background:var(--azul-oscuro);
  background-image:radial-gradient(rgba(255,255,255,.7) 1.2px,transparent 1.2px);
  background-size:13px 13px;color:var(--negro);
  font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.55;
}
a{color:var(--azul-oscuro);font-weight:800}
a:hover{color:var(--rojo)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:4px dashed var(--rojo);outline-offset:4px}
.desktop-window{
  width:min(850px,100%);margin:0 auto;background:var(--amarillo);
  border:5px solid var(--negro);box-shadow:12px 12px 0 rgba(0,0,0,.55);overflow:visible;
}
.title-bar{
  min-height:34px;padding:5px 10px;background:var(--rojo);color:var(--amarillo);
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  font:900 12px Arial,sans-serif;letter-spacing:1px;border-bottom:4px solid var(--negro);
}
.title-bar-label{display:flex;gap:8px;align-items:center}.title-icon{font-size:17px}
.window-controls{display:flex;gap:4px;flex:0 0 auto}
.window-controls span,.fake-close{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--amarillo);border:2px solid var(--negro);color:var(--negro);font:bold 14px Arial,sans-serif}
.browser-toolbar{display:none}
.browser-menu{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:13px 18px;
  background:var(--azul);border-bottom:5px solid var(--negro);
}
.browser-menu a{
  display:inline-block;padding:7px 12px;background:linear-gradient(#fff064 0%,#ffcf27 55%,#e6a817 100%);
  border:3px outset #fff18a;box-shadow:3px 3px 0 var(--negro);text-decoration:none;
  text-transform:uppercase;font-family:Impact,"Arial Black",Arial,sans-serif;font-size:13px;letter-spacing:.4px;color:var(--negro);
}
.browser-menu a:hover{background:var(--rojo);color:white;border-style:inset;transform:translate(1px,1px);box-shadow:2px 2px 0 var(--negro)}
.page-inner{padding:clamp(13px,3vw,26px);background:var(--amarillo)}
/* CABECERA PRINCIPAL: retrato grande y titular de anuncio */
.cabecera{
  display:grid;grid-template-columns:minmax(0, .92fr) minmax(0,1.08fr);align-items:center;gap:12px;
  margin:0;padding:0 0 18px;border-bottom:7px ridge var(--rojo);background:var(--amarillo);
}
.foto-pequena{
  display:block;width:100%;height:auto;max-height:390px;object-fit:contain;object-position:center;
  background:#fff;border:5px ridge var(--rojo);box-shadow:6px 6px 0 var(--negro);border-radius:0;
}
.datos-cabecera{min-width:0;padding:8px 4px}
.texto-superior{
  display:inline-block;margin:0 0 10px;padding:4px 7px;background:var(--rojo);color:var(--amarillo);
  border:2px solid var(--negro);font:900 11px Arial,sans-serif;letter-spacing:1.2px;transform:rotate(-1deg);
}
h1{
  margin:0;color:var(--rojo);font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(40px,7.4vw,70px);font-weight:1000;line-height:.91;letter-spacing:-1.5px;
  text-transform:uppercase;overflow-wrap:anywhere;transform:rotate(-5deg);transform-origin:center left;
}
.eslogan{
  margin:15px 0 0;color:var(--azul);font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(25px,4.3vw,39px);font-weight:1000;line-height:1.03;text-transform:uppercase;
}
.subtexto{margin:12px 0 0;color:var(--negro);font:bold clamp(15px,2.1vw,19px)/1.3 Arial,sans-serif}
/* Segundo cartel: solo texto y llamada a la acción, sin otra fotografía */
.anuncio-principal{
  position:relative;display:block;margin:24px 0 22px;padding:22px 18px 28px;
  background:linear-gradient(135deg,#f33b2f 0%,#c82026 75%);border:5px ridge var(--amarillo-claro);
  outline:3px solid var(--negro);box-shadow:var(--sombra);text-align:center;
}
.anuncio-copy{position:relative;z-index:2}
.sello-urgente{
  display:inline-block;padding:5px 10px;background:var(--azul);color:var(--amarillo);
  border:3px outset #7da8ff;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(13px,2vw,17px);
  font-weight:1000;transform:rotate(-1.5deg);box-shadow:3px 3px 0 var(--negro);
}
.anuncio-precio{margin:0 0 0;color:var(--amarillo);font-family:Impact,"Arial Black",sans-serif;font-size:clamp(24px,4.5vw,42px);font-weight:1000;line-height:1.05;text-shadow:2px 2px 0 var(--negro)}
.anuncio-remate{margin:5px 0 20px;color:white;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(44px,9.5vw,86px);font-weight:1000;line-height:.9;letter-spacing:-2px;text-shadow:4px 4px 0 var(--negro),7px 7px 0 var(--azul);transform:rotate(-1deg);overflow-wrap:anywhere}
.boton-anuncio{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 15px;
  background:linear-gradient(#fff36b,#ffce26 58%,#e7a91b);color:var(--negro);
  border:4px outset #fff18a;box-shadow:4px 4px 0 var(--negro);font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(13px,1.8vw,17px);font-weight:1000;text-decoration:none;line-height:1.25;
}
.boton-anuncio:hover{background:var(--azul);color:white;border-style:inset;transform:translate(2px,2px);box-shadow:2px 2px 0 var(--negro)}
.letra-pequena{display:block;margin-top:12px;color:white;font:700 12px Arial,sans-serif}
.anuncio-retrato{display:none!important}.cinta-anuncio{position:relative;margin:22px -18px -28px;padding:8px;background:var(--amarillo);border-top:4px ridge #fff68b;color:var(--rojo);text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(13px,2vw,18px);font-weight:1000;letter-spacing:.7px}
.marquesina{
  margin:30px 0 22px;padding:10px 8px;background:linear-gradient(#ffef50,#f7b922);color:var(--rojo);
  border:4px ridge #fff58a;outline:2px solid var(--negro);box-shadow:5px 5px 0 var(--negro);
  text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(16px,2.5vw,23px);font-weight:1000;line-height:1.15;letter-spacing:.5px;
}
.marquee-star{color:var(--azul);display:inline-block}
.content-layout{display:block}.sidebar{display:none}.presentacion{min-width:0}
.copy-section{margin:0 0 28px}.copy-section p{margin:0 0 15px}
.intro-copy{padding:0 0 18px;background:transparent;border:0;border-bottom:3px dashed var(--rojo);box-shadow:none;font-size:17px}
.saludo{margin:0!important;font-weight:700}
h2{
  margin:0 0 16px;padding:9px 12px;background:var(--azul);color:var(--amarillo);
  border:4px ridge #8eb4ff;outline:2px solid var(--negro);box-shadow:4px 4px 0 var(--rojo);
  font-family:Impact,"Arial Black",sans-serif;font-size:clamp(25px,4vw,34px);line-height:1.1;text-transform:uppercase;text-shadow:2px 2px 0 var(--negro);
}
.heading-mark{margin-right:8px;color:white}
.dolores{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:10px}
.dolores li{position:relative;margin:0;padding:13px 14px 13px 43px;background:var(--papel);border:3px ridge var(--rojo);box-shadow:3px 3px 0 var(--negro);font-weight:600;line-height:1.5}
.dolores li:nth-child(3n){background:#fff4a8}
.dolores li::before{content:"!";position:absolute;top:12px;left:11px;display:grid;place-items:center;width:21px;height:24px;color:white;background:var(--rojo);border:2px solid var(--negro);font-family:Impact,sans-serif;font-size:18px;font-weight:1000;line-height:1;transform:rotate(-6deg)}
.system-message{margin:17px 0;background:var(--papel);border:4px ridge var(--azul);box-shadow:4px 4px 0 var(--negro)}
.system-message-title{padding:6px 10px;color:white;background:var(--azul);border-bottom:3px solid var(--negro);font-family:Impact,"Arial Black",sans-serif;font-size:15px;text-transform:uppercase}
.system-message p{margin:0;padding:13px}
.highlight-copy{padding:13px 15px;background:#fff6a6;border:3px ridge var(--rojo);border-left:10px solid var(--rojo);box-shadow:4px 4px 0 var(--negro);font-weight:800}
.who-section{position:relative;padding:18px;background:#fff6a6;border:4px ridge var(--rojo);box-shadow:6px 6px 0 var(--negro);overflow:hidden}
.who-section h2{margin-right:0}.bart-sticker{display:none!important}.foto-grande{display:none!important}
.manifesto{padding:17px;background:var(--azul);border:4px ridge #82aaff;outline:2px solid var(--negro);box-shadow:6px 6px 0 var(--rojo)}
.big-statement{padding:10px;color:var(--rojo);background:var(--amarillo);border:2px solid #fff58a;box-shadow:2px 2px 0 var(--negro);text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(18px,2.7vw,25px);font-weight:1000;line-height:1.12;text-shadow:1px 1px 0 white}
.manifesto-window{margin:14px 0 0;background:white;border:3px ridge var(--rojo);box-shadow:3px 3px 0 var(--negro)}
.manifesto-title{padding:7px 10px;color:white;background:var(--rojo);border-bottom:3px solid var(--negro);font-family:Impact,"Arial Black",sans-serif;font-size:14px}
.manifesto-title{display:none}.manifesto-window p{margin:0;padding:18px;color:var(--negro);text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(27px,4.5vw,39px);font-weight:1000;line-height:1.15}
.transition-copy{margin-top:20px;padding-top:18px;border-top:3px dashed var(--rojo)}
.email-section{position:relative;margin-top:30px;padding:0 0 18px;background:var(--rojo);border:5px ridge var(--amarillo-claro);outline:2px solid var(--negro);box-shadow:7px 7px 0 var(--azul)}
.section-window-title{padding:11px 13px;color:var(--negro);background:linear-gradient(#fff064,#ffc82a);border-bottom:4px ridge var(--negro);font-family:Impact,"Arial Black",sans-serif;font-size:clamp(20px,3.4vw,29px);font-weight:1000;letter-spacing:.3px}
.email-section>p{margin:15px 16px 12px;color:white;font-weight:600}
.boton-form{margin:5px 16px 8px}
.form-window{margin:15px;background:var(--azul);border:4px ridge #8eb4ff;box-shadow:4px 4px 0 var(--negro)}
.form-title-bar{min-height:33px;padding:6px 9px;color:var(--amarillo);background:var(--azul);border-bottom:3px solid var(--negro);display:flex;align-items:center;justify-content:space-between;font-family:Impact,"Arial Black",sans-serif;font-size:14px}
.fake-close{width:22px;height:22px}
.formulario-klaviyo{padding:15px;background:var(--azul)}
.placeholder-form{padding:20px 13px;text-align:center;background:var(--amarillo);border:4px ridge #fff58a;box-shadow:4px 4px 0 var(--negro);color:var(--negro)}
.placeholder-icon{color:var(--rojo);font-size:35px;line-height:1.3}
.placeholder-form p{margin:5px 0;font-family:Impact,"Arial Black",sans-serif;font-size:19px;font-weight:1000}
.placeholder-form span{color:var(--negro);font:700 12px Arial,sans-serif}
.pie{margin-top:30px;padding:16px 10px 0;border-top:5px ridge var(--rojo);text-align:center;font:700 12px Arial,sans-serif;color:var(--negro)}
.pie p{margin:5px 0}.footer-status{color:var(--azul-oscuro)}
.status-light{display:inline-block;width:9px;height:9px;margin-right:5px;background:#24b82c;border:1px solid var(--negro);border-radius:50%;box-shadow:0 0 5px #24b82c}
.contact-ribbon{margin:0 0 18px;padding:10px;background:var(--rojo);color:var(--amarillo);border:4px ridge var(--amarillo-claro);outline:2px solid var(--negro);box-shadow:4px 4px 0 var(--negro);text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(18px,3vw,27px)}
.contact-inner .cabecera{margin-bottom:20px}.contact-inner .foto-pequena{max-height:330px}.contact-inner .eslogan{font-size:clamp(24px,4vw,36px)}
.contact-message{margin:20px 0}.contact-stamp{display:inline-block;margin:12px 15px 0;padding:6px 10px;color:var(--rojo);background:var(--amarillo);border:3px dashed var(--rojo);font-family:Impact,"Arial Black",sans-serif;transform:rotate(2deg)}
@media(max-width:600px){
  body{padding:9px 0 25px;background-size:10px 10px}
  .desktop-window{width:96%;border-width:3px;box-shadow:6px 6px 0 rgba(0,0,0,.55)}
  .page-inner{padding:12px}
  .browser-menu{gap:7px;padding:10px 7px}
  .browser-menu a{padding:6px 8px;font-size:11px;border-width:2px;box-shadow:2px 2px 0 var(--negro)}
  .cabecera{grid-template-columns:1fr;gap:9px;text-align:center;padding-bottom:15px}
  .foto-pequena {
    display: block;
    width: min(100%, 320px);
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: none;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}  
.datos-cabecera{padding:6px 2px 2px}
  .texto-superior{font-size:10px;letter-spacing:.8px}
  h1{font-size:clamp(43px,12vw,68px);line-height:.9;transform:rotate(-5deg)}
  .eslogan{font-size:clamp(27px,7vw,39px);margin-top:12px}
  .subtexto{font-size:16px}
  .anuncio-principal{margin:20px 0;padding:18px 11px 24px}
  .anuncio-remate{font-size:clamp(42px,12vw,68px);letter-spacing:-1px}
  .cinta-anuncio{margin:18px -11px -24px}
  .marquesina{margin:25px 0 19px}
  .copy-section{margin-bottom:24px}
  .who-section{padding:12px}
  .manifesto{padding:11px}
  .email-section{margin-top:24px}
  .email-section>p{margin-left:12px;margin-right:12px}
  .boton-form{margin-left:12px;margin-right:12px}
  .form-window{margin:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Ajuste de color: rojo y amarillo menos saturados y menos agresivos */
:root{
  --amarillo:#e5d85a;
  --amarillo-claro:#ead28a;
  --rojo:#b64a4e;
  --rojo-claro:#d56a5d;
  --papel:#fff9e7;
}
.browser-menu a{
  background:linear-gradient(#f0df91 0%,#e6c96b 55%,#d3ad55 100%);
  border-color:#f0e2aa;
}
.cabecera{background:var(--amarillo)}
.foto-pequena{border-color:var(--rojo)}
h1{text-shadow:none}
.anuncio-principal{background:linear-gradient(135deg,#d66a5f 0%,#b64a4e 75%);border-color:var(--amarillo-claro)}
.boton-anuncio{background:linear-gradient(#f1e4a0,#e6ce77 58%,#d2b15c);border-color:#eee1ac}
.cinta-anuncio{border-top-color:var(--amarillo-claro)}
.marquesina{background:linear-gradient(#eee19a,#e0c36d);border-color:var(--amarillo-claro)}
.dolores li:nth-child(3n){background:#f4e9b9}
.highlight-copy,.who-section{background:#f5edc7}
.big-statement{border-color:var(--amarillo-claro);text-shadow:1px 1px 0 #fff9e7}
.section-window-title{background:linear-gradient(#f0df91,#e5c873)}
.placeholder-form{border-color:var(--amarillo-claro)}

/* Resto de la página: estilo más limpio y plano. La cabecera y el primer anuncio no se modifican. */
.content-layout,
.presentacion{background:transparent;}
.copy-section{margin:0 0 30px;padding:0;background:transparent;border:0;outline:0;box-shadow:none;overflow:visible;}
.copy-section p{line-height:1.65;}
.intro-copy{padding:0 0 18px;border:0;border-bottom:1px solid var(--rojo);font-size:17px;}
h2{margin:0 0 15px;padding:0;background:transparent;color:var(--rojo);border:0;outline:0;box-shadow:none;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(25px,4vw,34px);line-height:1.1;text-shadow:none;}
.heading-mark{color:var(--azul);}
.dolores{gap:12px;padding-left:0;}
.dolores li,
.dolores li:nth-child(3n){padding:0 0 0 23px;background:transparent;border:0;box-shadow:none;font-weight:400;line-height:1.65;}
.dolores li::before{content:"›";top:0;left:0;display:block;width:auto;height:auto;color:var(--rojo);background:transparent;border:0;font-family:Arial,sans-serif;font-size:25px;font-weight:700;line-height:1;transform:none;}
.system-message{margin:16px 0;padding:0;background:transparent;border:0;border-left:4px solid var(--rojo);box-shadow:none;}
.system-message-title{padding:0 0 5px 12px;color:var(--rojo);background:transparent;border:0;font-family:Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.5px;}
.system-message p{padding:3px 0 3px 12px;line-height:1.65;}
.highlight-copy{padding:0;margin:0 0 15px;background:transparent;border:0;border-left:3px solid var(--rojo);box-shadow:none;font-weight:700;padding-left:14px;}
.who-section{padding:0;background:transparent;border:0;box-shadow:none;overflow:visible;}
.manifesto{padding:0;background:transparent;border:0;outline:0;box-shadow:none;}
.big-statement{margin:5px 0 16px;padding:0;color:var(--rojo);background:transparent;border:0;box-shadow:none;text-align:left;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(24px,4vw,37px);font-weight:1000;line-height:1.12;text-shadow:none;}
.manifesto-window{margin:12px 0 0;padding:0;background:transparent;border:0;box-shadow:none;border-left:4px solid var(--azul);}
.manifesto-title{padding:0 0 5px 12px;color:var(--azul);background:transparent;border:0;font-family:Arial,sans-serif;font-size:13px;font-weight:700;}
.manifesto-window p{padding:4px 0 4px 12px;color:var(--negro);text-align:left;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(20px,3.4vw,29px);font-weight:1000;line-height:1.2;}
.email-section{margin-top:28px;padding:0 0 18px;background:transparent;border:0;outline:0;box-shadow:none;}
.section-window-title{padding:12px 0 8px;color:var(--rojo);background:transparent;border:0;border-bottom:1px solid var(--amarillo-claro);font-family:Impact,"Arial Black",sans-serif;font-size:clamp(20px,3.4vw,29px);font-weight:1000;letter-spacing:.3px;}
.email-section>p{margin:12px 0;color:var(--negro);font-weight:400;}
.boton-form{margin:8px 0 12px;}
.form-window{margin:14px 0;background:transparent;border:1px solid var(--azul);box-shadow:none;}
.form-title-bar{min-height:30px;padding:7px 10px;color:var(--azul);background:transparent;border:0;border-bottom:1px solid var(--azul);font-family:Arial,sans-serif;font-size:13px;font-weight:700;}
.formulario-klaviyo{padding:12px;background:transparent;}
.placeholder-form{padding:18px 12px;text-align:center;background:transparent;border:1px dashed var(--rojo);box-shadow:none;color:var(--negro);}
.placeholder-icon{color:var(--rojo);font-size:30px;line-height:1.3;}
.placeholder-form p{margin:5px 0;font-family:Arial,sans-serif;font-size:15px;font-weight:700;}
.placeholder-form span{color:var(--negro);font:400 12px Arial,sans-serif;}
.pie{padding:16px 10px 0;border-top:1px solid var(--rojo);font-weight:400;}
.status-light{box-shadow:none;}
@media(max-width:600px){
  .copy-section{margin-bottom:25px;padding:0;}
  .who-section{padding:0;}
  .manifesto{padding:0;}
  .email-section{margin-top:22px;padding-bottom:14px;}
  .email-section>p,.boton-form,.form-window{margin-left:0;margin-right:0;}
  .formulario-klaviyo{padding:10px 0;}
}

/* Ajustes finales: menos ruido y jerarquia tipografica más clara */
h1{transform:none;}
.anuncio-remate{transform:rotate(-4deg);}
.anuncio-precio{margin-top:0;}
.big-statement{font-size:clamp(18px,2.7vw,25px);line-height:1.2;}
.manifesto-window p{font-size:clamp(27px,4.5vw,39px);line-height:1.15;padding-top:10px;padding-bottom:10px;}
.manifesto-title{display:none;}
.transition-copy{margin-top:20px!important;padding-top:18px!important;border-top:1px solid var(--rojo)!important;}

/* Imagen a la derecha de la sección "Déjame adivinar" */

.imagen-problema {
    float: right;
    width: 320px;
    max-width: none;
    height: auto;
    margin: 0 -60px 15px 20px;
    position: relative;
    z-index: 2;
}

/* Fuente personalizada para titulares y encabezados */
h1,
h2,
h3,
h4,
h5,
h6,
.manifesto-window p {
    font-family: "DayPosterShadow", sans-serif;
}