/* ============================================================
   opheliapastrana.com
   Palette and heavy uppercase display carried over from the
   2016 site; everything else rebuilt. No framework, no JS.
   ============================================================ */

:root{
  --ink:      #121212;
  --paper:    #ffffff;
  --haze:     #f4f4f3;
  --signal:   #d32f2f;
  --signal-on-dark: #ff5c4d;   /* mismo rojo, ajustado para pasar AA sobre fondo oscuro */
  --rule:     #dcdcdc;
  --rule-dk:  #2e2e2e;
  --mute:     #5a5a5a;
  --mute-dk:  #a3a3a3;
  --verified: #0a6cb3;   /* azul verificado, oscurecido para pasar AA sobre blanco */
  --verified-grey: #767676;

  --display: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1120px;
  --gap: clamp(1.25rem, 3vw, 2.25rem);
  --sec-y: clamp(4rem, 9vw, 7.5rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

a{ color: inherit; text-decoration: none; }

p a:not(.btn):not(.mail a), .awards a, .card a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .15s ease, background-color .15s ease;
}
p a:not(.btn):hover, .awards a:hover, .card a:hover{ color: var(--signal); }

:focus-visible{
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

.skip{
  position:absolute; left:-9999px;
  background: var(--ink); color:#fff;
  padding:.75rem 1.25rem; z-index:100;
}
.skip:focus{ left:1rem; top:1rem; }

.wrap{
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

/* ---------- shared type ---------- */

.eyebrow{
  font-family: var(--mono);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--signal);
  margin:0 0 1rem;
}

h1, h2, h3{
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}

h2{
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  margin-bottom: 1.25rem;
}

h3{
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: .6rem;
}

.sec-lede{
  max-width: 56ch;
  color: var(--mute);
  margin: 0 0 3rem;
}

/* ---------- header ---------- */

.bar{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.bar-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:66px;
}

.mark{ display:flex; align-items:center; gap:.6rem; font-weight:800; }
.mark-o{
  display:grid; place-items:center;
  width:30px; height:30px;
  background: var(--signal); color:#fff;
  font-size:1rem; line-height:1;
  letter-spacing:-.04em;
}
.mark-name{
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:.95rem;
}

.nav{
  display:flex; align-items:center; gap: clamp(.75rem, 2vw, 1.75rem);
  list-style:none; margin:0; padding:0;
  font-size:.82rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.04em;
}
.nav a{ padding:.4rem 0; border-bottom:2px solid transparent; }
.nav a:hover{ border-bottom-color: var(--signal); }

.nav-cta{
  background: var(--ink); color:#fff;
  padding:.55rem 1rem !important;
  border-bottom:none !important;
}
.nav-cta:hover{ background: var(--signal); }

@media (max-width: 860px){
  .mark-name{ display:none; }
  .bar-in{ flex-wrap:wrap; padding-block:.6rem; gap:.5rem 1rem; }
  .nav{ width:100%; flex-wrap:wrap; gap:.5rem .9rem; font-size:.74rem; }
  .nav-cta{ padding:.4rem .8rem !important; margin-left:auto; }
}

/* ---------- hero ---------- */

.hero{ padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem); }

.hero-in{
  display:grid;
  grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items:center;
}

h1{
  font-size: clamp(2.9rem, .8rem + 6.4vw, 6.1rem);
  letter-spacing: -.045em;
  margin-bottom: 1.5rem;
}

.lede{
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  font-weight:500;
  line-height:1.45;
  max-width: 34ch;
  margin: 0 0 1.25rem;
}

.sub{
  color: var(--mute);
  max-width: 48ch;
  margin: 0 0 2rem;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin:0; }

.btn{
  display:inline-block;
  font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.85rem 1.6rem;
  background: var(--signal); color:#fff;
  border:2px solid var(--signal);
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover{ background: var(--ink); border-color: var(--ink); }

.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--ink);
}
.btn-ghost:hover{ background:var(--ink); color:#fff; }

.hero-portrait img{ width:100%; max-width:600px; }

@media (max-width: 800px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-portrait{ order:-1; max-width:280px; }
}

/* ---------- ticker (signature) ---------- */

.ticker{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background: var(--paper);
  overflow:hidden;
  padding:.85rem 0;
}

.ticker-track{
  display:flex; width:max-content;
  animation: slide 44s linear infinite;
}

.ticker-seq{
  display:flex; align-items:center;
  font-family: var(--mono);
  font-weight:500; font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap;
}
.ticker-seq b{ font-weight:500; padding:0 1.1rem; }
.ticker-seq i{ color: var(--signal); font-style:normal; font-size:.55rem; }

@keyframes slide{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; width:100%; flex-wrap:wrap; }
  .ticker-seq:last-child{ display:none; }
  .ticker-seq{ flex-wrap:wrap; white-space:normal; justify-content:center; }
}

/* ---------- sections ---------- */

.sec{ padding: var(--sec-y) 0; }
.sec-haze{ background: var(--haze); }

.sec-dark{
  background: var(--ink);
  color: #fff;
}
.sec-dark .sec-lede{ color: var(--mute-dk); }
.sec-dark .eyebrow{ color: var(--signal-on-dark); }

/* ---------- reconocimientos ---------- */

.awards{
  list-style:none; margin:2.5rem 0 0; padding:0;
  border-top:1px solid var(--rule);
}
.awards li{
  display:grid;
  grid-template-columns: 190px 1fr;
  gap: var(--gap);
  padding:1.35rem 0;
  border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.awards p{ margin:0; max-width:62ch; }

.award-src{
  font-family: var(--mono);
  font-size:.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color: var(--mute);
}

@media (max-width: 700px){
  .awards li{ grid-template-columns:1fr; gap:.4rem; }
}

/* ---------- cards ---------- */

.grid-3{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
}

.card{
  border-top:2px solid var(--ink);
  padding-top:1.1rem;
}
.card p{ margin:0; color: var(--mute); font-size:.96rem; }

/* ---------- quote band ---------- */

.band{
  background: var(--ink);
  color:#fff;
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align:center;
}
.band-quote{ margin:0; }
.band-quote p{
  font-family: var(--display);
  font-weight:800; text-transform:uppercase;
  font-size: clamp(1.8rem, 1rem + 3.6vw, 3.4rem);
  line-height:1; letter-spacing:-.035em;
  margin:0 0 .9rem;
}
.band-quote cite{
  font-family: var(--mono); font-style:normal;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--signal-on-dark);
}

/* ---------- press quotes ---------- */

.quotes .quote{ margin:0; }
.quote blockquote{
  margin:0 0 .9rem;
  border-left:2px solid var(--signal);
  padding-left:1.1rem;
}
.quote blockquote p{ margin:0; font-size:1rem; }
.quote figcaption{
  font-family: var(--mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--mute);
  padding-left:1.1rem;
}

/* ---------- video ---------- */


/* ---------- servicios ---------- */

.grid-4{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}

.svc{ display:block; }
.svc-img{
  display:block; overflow:hidden;
  background: var(--ink);
}
.svc-img img{
  width:100%;
  aspect-ratio: 400 / 540;
  object-fit: cover;
  transition: transform .45s ease;
}
.svc:hover .svc-img img{ transform: scale(1.04); }

.svc-body{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.5rem; padding-top:.9rem;
  border-top:2px solid var(--ink); margin-top:.9rem;
}
.svc-title{
  font-weight:700; text-transform:uppercase;
  font-size:.9rem; letter-spacing:-.01em; line-height:1.2;
}
.svc-more{
  font-family: var(--mono);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--signal); white-space:nowrap;
}

/* ---------- contacto ---------- */

.contact-in{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.mail{ margin:0 0 1.25rem; }
.mail a{
  font-family: var(--display);
  font-weight:800;
  font-size: clamp(1.5rem, .9rem + 2.4vw, 2.6rem);
  letter-spacing:-.03em;
  text-decoration:none;
  border-bottom:3px solid var(--signal);
  padding-bottom:.15rem;
}
.mail a:hover{ color: var(--signal); }

.links{ list-style:none; margin:0; padding:0; }
.links li{ border-bottom:1px solid var(--rule-dk); }
.links a{
  display:block; padding:.65rem 0;
  font-size:.88rem; font-weight:500;
  text-decoration:none;
  transition: color .15s ease, padding-left .15s ease;
}
.links a:hover{ color: var(--signal); padding-left:.4rem; }

@media (max-width: 760px){
  .contact-in{ grid-template-columns:1fr; }
}

/* ---------- footer ---------- */

.foot{
  background: var(--ink);
  color: var(--mute-dk);
  border-top:1px solid var(--rule-dk);
  padding:1.75rem 0;
}
.foot-in{
  display:flex; justify-content:space-between; gap:1rem;
  font-family: var(--mono);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.foot p{ margin:0; }
.foot a:hover{ color: var(--signal); }

/* ---------- counters ---------- */

.grid-5{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
}
.counts{ margin-top:2.5rem; }

.count{
  display:flex; flex-direction:column;
  align-items:flex-start;
  border-top:2px solid var(--ink);
  padding-top:1rem;
  transition: border-color .15s ease;
}
.count:hover{ border-top-color: var(--signal); }

.count-net{
  font-weight:700; text-transform:uppercase;
  font-size:.9rem; letter-spacing:-.01em;
}
.count-n{
  font-family: var(--display);
  font-weight:800;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  line-height:1; letter-spacing:-.04em;
  margin:1rem 0 .2rem;
  font-variant-numeric: tabular-nums;
}
.count:hover .count-n{ color: var(--signal); }
.count-lbl{
  font-size:.85rem; color: var(--mute);
}
.count-at{
  font-family: var(--mono);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--mute); margin-top:.6rem;
}

/* ---------- verification badges ---------- */

.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:.2rem;
  font-family: var(--mono);
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.2;
}
.badge svg{
  width:15px; height:15px; flex:none;
  fill: currentColor;
}
.badge svg .tick{
  fill:none; stroke:#fff; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}

.badge-check{ color: var(--verified); }
.badge-shield{ color: var(--verified-grey); }

.badge-plain{
  color: var(--mute);
  padding-left:.1rem;
}

.count-btn{
  display:inline-block;
  margin-top:1rem;
  font-weight:700; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.55rem 1.1rem;
  border:2px solid var(--ink);
  color: var(--ink);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.count:hover .count-btn,
.count:focus-visible .count-btn{
  background: var(--signal);
  border-color: var(--signal);
  color:#fff;
}

/* push the button to a common baseline across cards of differing height */
.count-lbl{ margin-bottom:auto; }


.svcs .svc-title{ font-size:.85rem; }
.svc-title{ margin-bottom:auto; }
.svc{ display:flex; flex-direction:column; }
.svc-body{ flex:1; }

/* ---------- diplomas (wide embed) ---------- */

.sec-center{ text-align:center; }
.sec-center .sec-lede{ margin-left:auto; margin-right:auto; }

.rec-wide{
  position:relative;
  max-width:1120px;
  width:100%;
  margin:2.5rem auto 0;
  overflow:hidden;
  background:#fff;
}
.rec-wide iframe{
  display:block;
  transform-origin: top left;
}

/* ---------- contact form ---------- */

.form{ margin-top:2.5rem; max-width:440px; }

.form-row{ margin-bottom:1.4rem; }

.form label{
  display:block;
  font-family: var(--mono);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--mute-dk);
  margin-bottom:.5rem;
}

.form input[type="text"],
.form input[type="email"],
.form textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:2px solid var(--rule-dk);
  color:#fff;
  font-family: var(--display);
  font-size:1rem;
  padding:.5rem 0;
  resize:vertical;
  transition: border-color .15s ease;
}
.form textarea{ min-height:5.5rem; }

.form input::placeholder,
.form textarea::placeholder{ color: var(--mute-dk); }

.form input:focus,
.form textarea:focus{
  outline:none;
  border-bottom-color: var(--signal);
}

.form button.btn{
  border:2px solid var(--signal);
  background: var(--signal);
  cursor:pointer;
  font-family: var(--display);
}
.form button.btn:hover{ background:#fff; color: var(--ink); border-color:#fff; }

/* honeypot: off-screen, not display:none — invisible to people, visible to bots */
.hp{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}



/* ---------- videos (wide, matches diplomas rhythm) ---------- */

.yt-facade{
  position:relative;
  background-size:cover;
  background-position:center;
  background-color: var(--ink);
  cursor:pointer;
}
.yt-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.yt-wide{
  max-width:960px;
  aspect-ratio: 16 / 9;
  margin:2.5rem auto 0;
}

.yt-tile{ width:100%; aspect-ratio: 9 / 16; }

.yt-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(18,18,18,.25);
  transition: background-color .15s ease;
}
.yt-play svg{ width:64px; height:64px; }
.yt-play svg circle{ fill: var(--signal); transition: fill .15s ease; }
.yt-facade:hover .yt-play,
.yt-facade:focus-visible .yt-play{ background: rgba(18,18,18,.45); }
.yt-facade:hover .yt-play svg circle,
.yt-facade:focus-visible .yt-play svg circle{ fill:#fff; }
.yt-facade:hover .yt-play svg path,
.yt-facade:focus-visible .yt-play svg path{ fill: var(--signal); }

/* ---------- video grid (varios, dinámico) ---------- */

.video-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content:center;
  gap: var(--gap);
  max-width:820px;
  margin:2.5rem auto 0;
}
/* con un solo video (respaldo) no debe inflarse a todo el ancho */
.video-grid:has(.yt-tile-wrap:only-child){
  grid-template-columns: minmax(0, 260px);
}

@media (max-width: 700px){
  .video-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width:420px; }
}
@media (max-width: 420px){
  .video-grid{ grid-template-columns: minmax(0, 260px); }
}
.yt-tile-wrap{ text-align:left; }

.yt-tile-title{
  margin:.75rem 0 0;
  font-size:.85rem;
  font-weight:500;
  line-height:1.35;
  color: var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.videos-more{ margin-top:2rem; }
.videos-more a{
  font-family: var(--mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--signal);
  text-decoration:none;
  border-bottom:2px solid var(--signal);
  padding-bottom:.2rem;
}
.videos-more a:hover{ color: var(--ink); border-color: var(--ink); }

/* ---------- trusted-by brand list ---------- */

.brands{
  margin-top:3.5rem;
  padding-top:2rem;
  border-top:1px solid var(--rule);
  text-align:center;
}
.brands-label{
  font-family: var(--mono);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--mute);
  margin:0 0 1.25rem;
}
.brandlist{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem 0;
  font-weight:700; text-transform:uppercase;
  font-size:.9rem; letter-spacing:-.01em;
  color: var(--ink);
}
.brandlist li:not(:last-child)::after{
  content:"·";
  color: var(--signal);
  margin:0 .9rem;
  font-weight:400;
}

/* variant: marcas as its own standalone section rather than a coda under servicios */
.brands-standalone{ margin-top:0; padding-top:0; border-top:none; }

/* ---------- brands ticker (dinámico, vía marcas.csv) ---------- */

.brands-ticker{
  overflow:hidden;
  margin-top:1.25rem;
}
.brands-ticker-track{
  display:flex; width:max-content;
  animation: slide 24s linear infinite; /* la duración real la fija el JS */
}
.brands-ticker-seq{
  display:flex; align-items:center;
  font-weight:700; text-transform:uppercase;
  font-size:.9rem; letter-spacing:-.01em;
  white-space:nowrap;
}
.brands-ticker-seq b{ font-weight:700; padding:0 .9rem; }
.brands-ticker-seq i{ color: var(--signal); font-style:normal; }

@media (prefers-reduced-motion: reduce){
  .brands-ticker-track{ animation:none; width:100%; flex-wrap:wrap; justify-content:center; }
  .brands-ticker-seq:last-child{ display:none; }
  .brands-ticker-seq{ flex-wrap:wrap; white-space:normal; justify-content:center; }
}

/* visualmente oculto, pero sigue disponible para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* la tarjeta de YouTube no lleva badge: el 'Partner' ocupa ese lugar
   para que los números queden alineados entre tarjetas */
.badge-plain{ margin-top:.2rem; }