/* Generado desde maqueta/duelo-mascotas.html. */
/* Esta página toma el mundo de su Instagram: el gatito naranjo dormido de su logo,
   los atardeceres y el cielo de noche con huellas. Mantiene las letras y el hilo del sitio. */
:root{
  --ciruela:#43183a;
  --atigrado:#d8742a;     /* el naranjo de Gus y de su logo */
  --atigrado-osc:#a9541a; /* para texto y botones: se lee sobre claro */
  --durazno:#fde6d3;
  --arena:#fffaf4;
  --noche:#141d3a;        /* el cielo de sus publicaciones */
  --estrella:#ffd98a;
  --tinta-suave:#7a5a5c;
  --linea:#f1d8c4;
  --titulos:"Bricolage Grotesque",system-ui,sans-serif;
  --texto:"Newsreader",Georgia,serif;
  --ancho:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--arena);color:var(--ciruela);font:400 1.19rem/1.62 var(--texto);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--titulos);margin:0;letter-spacing:-.025em;line-height:1.02;font-weight:800}
h1{font-size:clamp(2.7rem,7.4vw,5.6rem);line-height:.96}
h2{font-size:clamp(2rem,4.6vw,3.3rem)}
h3{font-size:1.4rem;letter-spacing:-.015em;line-height:1.15;font-weight:700}
p{margin:0}
a{color:var(--atigrado-osc);text-underline-offset:.18em}
.ancho{max-width:var(--ancho);margin-inline:auto;padding-inline:22px}
.bloque{padding-block:clamp(64px,9vw,120px)}
.entrada{max-width:34em;margin-top:18px;color:var(--tinta-suave)}
.boton{font:700 1rem/1 var(--titulos);display:inline-flex;align-items:center;justify-content:center;padding:17px 28px;border-radius:999px;border:2px solid var(--atigrado-osc);background:var(--atigrado-osc);color:#fff;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.boton:hover{background:var(--ciruela);border-color:var(--ciruela)}
.boton.claro{background:transparent;color:var(--ciruela);border-color:var(--ciruela)}
.boton.claro:hover{background:var(--ciruela);color:#fff}
:focus-visible{outline:3px solid var(--noche);outline-offset:4px;border-radius:6px}
.falta{font:600 .78rem/1 var(--titulos);background:#ffe9a8;color:#5c4700;border-radius:6px;padding:4px 7px;white-space:nowrap;vertical-align:.12em}

.cabecera{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--arena) 88%,transparent);backdrop-filter:blur(10px)}
.cabecera .ancho{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px}
.firma{font:800 1.28rem/1 var(--titulos);letter-spacing:-.03em;color:var(--ciruela);text-decoration:none;white-space:nowrap}
.firma span{display:block;font:400 .92rem/1.2 var(--texto);letter-spacing:0;color:var(--tinta-suave);margin-top:3px}
.menu{display:flex;align-items:center;gap:30px}
.menu a:not(.boton){font:500 1rem/1 var(--titulos);color:var(--ciruela);text-decoration:none}
.menu a:not(.boton):hover{color:var(--atigrado-osc)}
.menu .boton{padding:13px 22px;white-space:nowrap}
@media (max-width:860px){.menu a:not(.boton){display:none}}
@media (max-width:420px){.firma{font-size:1.08rem}.firma span{font-size:.85rem}.menu .boton{padding:12px 16px;font-size:.93rem}}

/* Portada */
.portada{overflow:hidden;padding-block:clamp(36px,6vw,80px) clamp(56px,8vw,110px)}
.portada .ancho{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.portada .lema{font-size:1.36rem;line-height:1.5;margin:26px 0 34px;max-width:26em;color:var(--tinta-suave)}
.portada .lema b{color:var(--ciruela);font-weight:600}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.dibujo{width:100%;height:auto;display:block;overflow:visible}
.dibujo .hebra{fill:none;stroke:var(--atigrado);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .dibujo .hebra{animation:desenrollar 2.4s cubic-bezier(.6,.05,.3,1) .3s both}
  @keyframes desenrollar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}
.dedicatoria{font:italic 400 1.1rem/1.3 var(--texto);color:var(--tinta-suave);text-align:center;margin-top:6px}
@media (max-width:860px){.portada .ancho{grid-template-columns:1fr}.dibujo{max-width:380px;margin:0 auto}}

/* Lo que sientes */
.sentir{background:#fff}
.frases{list-style:none;margin:48px 0 0;padding:0}
.frases li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:8px 48px;padding:30px 0;border-top:2px solid var(--linea)}
.frases li:last-child{border-bottom:2px solid var(--linea)}
.frases h3{font-size:clamp(1.45rem,2.6vw,1.95rem);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.frases p{color:var(--tinta-suave)}
@media (max-width:860px){.frases li{grid-template-columns:1fr}}

/* Dos duelos */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.dos article{background:var(--durazno);border-radius:34px;padding:clamp(26px,4vw,44px)}
.dos article:last-child{background:#f3e3ea}
.dos h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
.cierre-dos{margin-top:28px;max-width:38em;font-size:1.26rem}
@media (max-width:860px){.dos{grid-template-columns:1fr}}

/* La noche: el único momento oscuro de la página */
.noche{background:var(--noche);color:#eef0fa;position:relative;overflow:hidden}
.noche .ancho{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.noche h2{color:#fff;font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:.98}
.noche p{margin-top:24px;max-width:28em;font-size:1.3rem;color:#c9cfe8}
.noche em{color:var(--estrella);font-style:italic}
.cielo{width:100%;height:auto;display:block}
@media (max-width:860px){.noche .ancho{grid-template-columns:1fr}.cielo{max-width:320px;margin:0 auto}}

/* Historia */
.historia{background:var(--durazno)}
.historia .ancho{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,88px);align-items:start}
.carta h2{margin-bottom:28px}
.carta p{font-size:1.3rem;line-height:1.6}
.carta p + p{margin-top:1em}
.rubrica{font:italic 400 2rem/1 var(--texto);color:var(--atigrado-osc);margin-top:28px !important}
.retratos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}
.retratos figure{margin:0;text-align:center}
.retratos img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:6px solid var(--arena)}
.retratos figcaption{font:700 1.15rem/1.2 var(--titulos);letter-spacing:-.015em;margin-top:12px}
.ritmo{background:var(--arena);border-radius:28px;padding:32px}
.ritmo h3{margin-bottom:6px}
.ritmo ul{list-style:none;margin:0;padding:0}
.ritmo li{padding:16px 0;border-bottom:1px solid var(--linea);line-height:1.4}
.ritmo li:last-child{border-bottom:0;padding-bottom:0}
.ritmo b{font-family:var(--titulos);font-weight:700;letter-spacing:-.01em}
@media (max-width:860px){.historia .ancho{grid-template-columns:1fr}}

/* Acompañamiento */
.temas{columns:2;column-gap:56px;margin:44px 0 0;padding:0;list-style:none}
.temas li{break-inside:avoid;padding:18px 0;border-top:2px solid var(--linea)}
.temas b{display:block;font:700 1.25rem/1.2 var(--titulos);letter-spacing:-.015em;margin-bottom:4px}
.temas span{color:var(--tinta-suave)}
@media (max-width:860px){.temas{columns:1}}

.llamado .panel{background:var(--ciruela);color:#f6e6ee;border-radius:40px;padding:clamp(32px,6vw,72px);display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:32px;align-items:center}
.llamado h2{color:#fff}
.llamado p{margin-top:16px;color:#e1c6d6;max-width:30em}
.llamado .acciones{flex-direction:column}
.llamado .boton{background:#fff;border-color:#fff;color:var(--ciruela)}
.llamado .boton:hover{background:var(--durazno);border-color:var(--durazno)}
.llamado .boton.claro{background:transparent;color:#fff;border-color:#b98aa9}
.llamado .boton.claro:hover{background:#fff;color:var(--ciruela);border-color:#fff}
@media (max-width:860px){.llamado .panel{grid-template-columns:1fr}}

.urgencia{background:#fff;border:2px solid var(--atigrado);border-radius:24px;padding:24px 28px;margin-block:clamp(48px,7vw,80px);max-width:800px}
.urgencia b{font-family:var(--titulos)}
.pie{background:var(--ciruela);color:#f3dfe6;padding:56px 0 40px;font-size:1.05rem}
.pie .ancho{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
.pie strong{font:800 1.5rem/1 var(--titulos);letter-spacing:-.03em;color:#fff;display:block;margin-bottom:10px}
.pie a{color:#fff}
.pie p + p{margin-top:4px}