/* ============================================================
   Rubi Gallego Crespo — Bailaora de Danza Española
   Estructura y medidas calcadas de la referencia (Framer, 1440px)
   ============================================================ */

:root{
  /* ---- Paleta ---- */
  --bg:            #000000;
  --bg-soft:       #0d0d0d;
  --text:          #ffffff;
  --text-dim:      rgb(194,194,194);
  --text-dimmer:   rgb(150,150,150);
  --link:          rgb(189,189,189);

  /* Acento. En la web original es morado rgb(64,32,168).
     Para danza española usamos carmín. Cambia SOLO esta línea. */
  --accent-rgb:    176, 12, 32;

  /* ---- Rejilla (medidas reales de la referencia) ---- */
  --nav-h:         45px;
  --band-w:        961px;   /* contenedor de cada sección */
  --band-inner:    957px;
  --col-text:      429px;
  --col-img:       469px;
  --footer-w:      1200px;

  /* ---- Tipografía ---- */
  --serif:  'Libre Baskerville', Georgia, serif;
  --sans:   'Montserrat', -apple-system, Segoe UI, sans-serif;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }

body{
  margin:0;
  background:var(--bg);
  color:var(--text-dim);
  font-family:var(--sans);
  font-size:12px;
  line-height:14.4px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:var(--link); text-decoration:none; }

/* ------------------------------------------------------------
   Splash inicial (la referencia lo tiene como capa fija)
   ------------------------------------------------------------ */
.splash{
  position:fixed; inset:0; z-index:999;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .9s ease, visibility .9s ease;
}
.splash.hidden{ opacity:0; visibility:hidden; }
.splash .glow{
  position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.024) 0%, rgba(0,0,0,0) 68%);
  pointer-events:none;
}
.splash .mark{
  width:58px; height:48px; object-fit:contain; margin-bottom:28px;
  position:relative;
}
.splash .mark-fallback{
  font-family:var(--serif); font-size:26px; letter-spacing:4px;
  color:rgba(255,255,255,.88); margin-bottom:28px; position:relative;
}
.splash .word{
  font-family:Georgia, serif; font-size:22px; letter-spacing:9.24px;
  text-transform:uppercase; color:rgba(255,255,255,.88);
  position:relative; text-indent:9.24px;
}
.splash .tag{
  font-family:Georgia, serif; font-size:10px; letter-spacing:2.2px;
  color:rgba(255,255,255,.28); margin:8px 0 0; position:relative;
  text-indent:2.2px; text-align:center; max-width:86vw;
}
.splash .cite{
  font-family:Georgia, serif; font-size:9px; letter-spacing:2.6px;
  text-transform:uppercase; text-indent:2.6px;
  color:rgba(255,255,255,.16); margin:12px 0 0; position:relative;
}

/* ------------------------------------------------------------
   Navegación (sticky, 45px, logo centrado)
   ------------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.nav-inner{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:1440px; padding:0 24px;
}
/* Los dos grupos pesan igual, así el logo queda siempre en el centro exacto
   aunque a un lado haya más enlaces que al otro. */
.nav .links{ display:flex; align-items:center; gap:47px; flex:1 1 auto; }
.nav-side{ display:flex; align-items:center; gap:47px; flex:1 1 0; }
.nav-side--l{ justify-content:flex-end; }
.nav-side--r{ justify-content:flex-start; }
.nav a{
  font-size:11px; line-height:13px; letter-spacing:2.6px;
  text-transform:uppercase; color:var(--link);
  transition:color .25s ease;
  white-space:nowrap;
  /* El relleno no se ve —el texto queda igual— pero lleva la zona pulsable
     de 13 px a 37, que en un móvil es la diferencia entre acertar o no. */
  padding:12px 0;
}
.nav a:hover{ color:#fff; }
.nav-logo{
  width:50px; height:50px; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:17px; letter-spacing:1px; color:#fff;
  flex:0 0 50px;
}
.nav-logo img{ width:50px; height:50px; object-fit:contain; }

/* ------------------------------------------------------------
   Hero — imagen a sangre 1440x855, titular abajo
   ------------------------------------------------------------ */
.hero{
  position:relative;
  height:855px;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 48%;
  /* La foto es un contraluz de escenario: la silueta está a 5 de luz sobre 255
     y los brazos a 18. Un empujón mínimo para que se lea en pantallas malas
     sin perder la penumbra. Quita esta línea para dejarla tal cual salió. */
  filter:brightness(1.15) contrast(1.03);
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  /* Casi nada de velo: el suelo iluminado (42-54 de luz) ya da contraste de
     sobra al titular en blanco. El negro de arriba no necesita protección
     porque la barra de navegación es opaca. */
  background:linear-gradient(180deg, rgba(0,0,0,0) 72%, rgba(0,0,0,.18) 89%, rgba(0,0,0,.38) 100%);
}
.hero h1{
  position:relative; z-index:2; margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:61px; line-height:61px; letter-spacing:0;
  text-transform:uppercase; color:#fff; text-align:center;
  width:638px; max-width:90vw;
}
.hero .sub{
  position:relative; z-index:2;
  width:382px; max-width:90vw; text-align:center;
  color:var(--text-dim); margin:0 0 50px;
}

/* ------------------------------------------------------------
   Rótulo de sección (Libre Baskerville, tracking amplio)
   ------------------------------------------------------------ */
.eyebrow{
  font-family:var(--serif); font-weight:400;
  font-size:31px; line-height:29px; letter-spacing:13.98px;
  text-transform:uppercase; color:#fff;
  text-align:center; text-indent:13.98px;
  margin:0;
}
.eyebrow--sm{ font-size:23px; line-height:23px; letter-spacing:6.7px; text-indent:6.7px; }
.eyebrow--lg{ font-size:43px; line-height:48px; letter-spacing:6.98px; text-indent:6.98px; }

/* ------------------------------------------------------------
   Sección "Conóceme" — tira de vídeos con degradados laterales
   ------------------------------------------------------------ */
.videos{ padding:19px 0 0; }
.videos .caption{ text-align:center; margin:14px 0 41px; color:var(--text-dim); }

.strip-wrap{ position:relative; width:972px; max-width:100%; margin:0 auto; }
.strip{
  display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth;
  padding:0; margin:0; list-style:none;
  scrollbar-width:none;
}
.strip::-webkit-scrollbar{ display:none; }

/* --- Marquee: la tira avanza sola en bucle ---------------------------
   Se activa desde JS, que duplica las tarjetas y mide en --mitad el ancho
   exacto de la tanda original (tarjeta + hueco). Al desplazarse justo esa
   distancia, la copia cae donde estaba el original y el salto no se ve. */
.strip-wrap.marquee{ overflow:hidden; }
.strip-wrap.marquee .strip{
  overflow:visible; width:max-content;
  /* La distancia del bucle NO se mide: se calcula. Las tarjetas tienen ancho
     fijo, así que es (nº de vídeos) x (ancho + hueco). Medirla en JavaScript
     dependía de eventos de redimensionado que no siempre llegan, y un error
     de pocos píxeles se ve como un tirón en cada vuelta. */
  --tarjeta:245px;
  --hueco:10px;
  --mitad:calc(var(--n, 5) * (var(--tarjeta) + var(--hueco)));
  animation:marquee var(--dur, 28.3s) linear infinite;
  will-change:transform;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-1 * var(--mitad))); }
}
/* Se para al pasar el ratón, para poder leer los títulos y pulsar */
.strip-wrap.marquee:hover .strip,
.strip-wrap.marquee:focus-within .strip{ animation-play-state:paused; }
.strip li{ flex:0 0 245px; }
.strip a{ display:block; }
.strip .thumb{
  position:relative; width:245px; height:138px; border-radius:6px; overflow:hidden;
  background:linear-gradient(rgb(46,46,46) 0%, rgb(0,0,0) 100%);
}
.strip .thumb img{ width:100%; height:100%; object-fit:cover; }
.strip .thumb::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent rgba(255,255,255,.92);
  filter:drop-shadow(0 0 10px rgba(0,0,0,.6));
}
.strip .title{ margin:10px 0 0; color:var(--text-dim); }

/* Los degradados laterales solo tienen sentido cuando la tira se desplaza.
   Si las tarjetas caben enteras, se ocultan y el grupo se centra. */
.strip-wrap.desplazable::before,
.strip-wrap.desplazable::after{
  content:""; position:absolute; top:0; bottom:0; width:140px; pointer-events:none; z-index:2;
}
.strip-wrap.desplazable::before{ left:-1px;  background:linear-gradient(90deg, rgb(0,0,0) 15%, rgba(0,0,0,0) 85%); }
.strip-wrap.desplazable::after { right:-1px; background:linear-gradient(270deg, rgb(0,0,0) 15%, rgba(0,0,0,0) 85%); }
.strip-wrap:not(.desplazable):not(.marquee) .strip{ justify-content:center; }

/* ------------------------------------------------------------
   Capa del reproductor de vídeo
   ------------------------------------------------------------ */
.lightbox{
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.94);
  display:flex; align-items:center; justify-content:center;
  padding:40px 24px;
  opacity:0; transition:opacity .3s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox.visible{ opacity:1; }
/* El recuadro se ajusta al vídeo, no al revés. Con un ancho fijo, un vídeo
   vertical (576x1024) dejaba 705 px de negro vacío a los lados y parecía que
   no estuviera. */
.lightbox-caja{
  max-width:min(1100px, 100%);
  display:flex; flex-direction:column; align-items:center;
}
.lightbox video{
  width:auto; height:auto;
  max-width:100%; max-height:78vh;
  display:block; background:#000; border-radius:6px; outline:none;
}
.lightbox-titulo{
  margin:16px 0 0; text-align:center; color:var(--text-dim);
  font-size:11px; letter-spacing:2.6px; text-transform:uppercase; text-indent:2.6px;
  /* width:0 + min-width:100% hace que el título ocupe todo el ancho pero no
     cuente para calcularlo: si no, un título largo ensancha el recuadro y el
     vídeo deja de quedar ajustado. */
  width:0; min-width:100%;
}
.lightbox-cerrar{
  position:absolute; top:18px; right:24px;
  background:none; border:0; color:rgba(255,255,255,.6);
  font-size:38px; line-height:1; cursor:pointer; padding:4px 12px;
  transition:color .25s ease;
}
.lightbox-cerrar:hover{ color:#fff; }

/* ------------------------------------------------------------
   Pareja de retratos 374x374
   ------------------------------------------------------------ */
.portraits{
  display:flex; justify-content:center; gap:10px;
  padding:50px 0;
}
.portraits .ph{ width:374px; height:374px; border-radius:12px; }

/* ------------------------------------------------------------
   Bandas de contenido — contenedor 961px, radio 23px
   ------------------------------------------------------------ */
.band{
  width:var(--band-w); max-width:calc(100% - 48px);
  margin:0 auto;
  border-radius:23px;
  padding:25px;
  display:flex; align-items:center; gap:9px;
}
.band + .band{ margin-top:0; }
.band-section{ padding:33px 0; }

.band .text{ flex:0 0 var(--col-text); max-width:var(--col-text); }
.band .media{ flex:1 1 auto; display:flex; }
.band:not(.reverse) .media{ justify-content:flex-start; }
.band.reverse .media{ justify-content:flex-end; }

.band.reverse{ flex-direction:row-reverse; }

.band h2{
  margin:0 0 18px;
  font-family:var(--sans); font-weight:300;
  font-size:28px; line-height:41px; color:#fff;
}
.band p{ margin:0 0 12px; color:var(--text-dim); }
.band p:last-child{ margin-bottom:0; }
.band .dim p{ color:var(--text-dimmer); }
.band .brandmark{ height:32px; width:auto; margin-bottom:14px; object-fit:contain; }

/* Banda sin foto: el texto ocupa el ancho útil en vez de dejar un hueco */
.band--solo-texto{ justify-content:center; }
.band--solo-texto .text{ flex:0 1 720px; max-width:720px; }

/* Marco decorativo tenue de cada banda */
.band--framed{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(var(--accent-rgb),.05) 0%, rgba(0,0,0,0) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ------------------------------------------------------------
   Placeholder de imagen (se sustituye al soltar la foto real)
   ------------------------------------------------------------ */
.ph{
  position:relative; overflow:hidden; border-radius:10px;
  background:linear-gradient(rgb(28,28,28) 0%, rgb(8,8,8) 100%);
}
/* --enc ajusta el encuadre de cada foto sin tocar el CSS. Por ejemplo,
   style="--enc:50% 30%" sube el recorte para no cortar una cara. */
.ph img{ width:100%; height:100%; object-fit:cover; object-position:var(--enc, 50% 50%); }

/* Para carteles: llevan texto dentro, así que NO se pueden recortar.
   Se muestran enteros, con el fondo negro alrededor. */
.ph--cartel{ background:#000; }
.ph--cartel img{ object-fit:contain; object-position:50% 50%; }
.ph.missing::after{
  content:attr(data-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:10px; letter-spacing:2.2px; text-transform:uppercase;
  color:rgba(255,255,255,.30);
  background:linear-gradient(rgb(28,28,28) 0%, rgb(8,8,8) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  padding:0 16px;
}

/* ------------------------------------------------------------
   Botón píldora
   ------------------------------------------------------------ */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  width:255px; height:46px; border-radius:100px;
  border:1px solid rgba(255,255,255,.35);
  background:transparent; color:#fff;
  font-family:var(--sans); font-size:9px; font-weight:500;
  letter-spacing:2.61px; line-height:10.8px; text-transform:uppercase;
  text-indent:2.61px; cursor:pointer;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.pill:hover{
  background:rgba(var(--accent-rgb),.9);
  border-color:rgba(var(--accent-rgb),.9);
  color:#fff;
}

/* Botón principal (llamar): relleno en color de acento */
.pill--solid{
  background:rgba(var(--accent-rgb),1);
  border-color:rgba(var(--accent-rgb),1);
  color:#fff;
}
.pill--solid:hover{
  background:#fff; border-color:#fff; color:#000;
}

/* ------------------------------------------------------------
   Newsletter / contacto — 900px, imagen de fondo + resplandor
   ------------------------------------------------------------ */
.news{
  position:relative; height:900px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.news .bg{ position:absolute; inset:0; }
.news .bg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.news .bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(at 50% 100%, rgba(var(--accent-rgb),.38) 0%, rgba(var(--accent-rgb),.12) 45%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.9) 100%);
}
.news .bar{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(var(--accent-rgb),.5) 20%, rgba(var(--accent-rgb),.9) 50%, rgba(var(--accent-rgb),.5) 80%, rgba(0,0,0,0) 100%);
}
/* 800px en vez de los 632px de la referencia: "PONTE EN CONTACTO CONMIGO"
   es más largo que el lema original y a 43px no cabía sin partirse mal. */
.news .inner{ position:relative; z-index:2; width:800px; max-width:90vw; }
.news .eyebrow--sm{ margin-bottom:10px; }
.news p{ width:382px; max-width:100%; margin:33px auto 0; color:var(--text-dim); }
/* Los dos botones de contacto, uno al lado del otro; en móvil se apilan. */
.news .actions{
  margin-top:34px; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:16px;
}

/* ------------------------------------------------------------
   Pie
   ------------------------------------------------------------ */
.footer{
  width:var(--footer-w); max-width:calc(100% - 48px);
  margin:0 auto; min-height:124px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px;
  padding:22px 0;
}
.footer nav{ display:flex; gap:48px; flex-wrap:wrap; justify-content:center; }
.footer nav a{
  font-size:11px; line-height:13px; letter-spacing:2.6px; text-transform:uppercase;
  transition:color .25s ease;
  padding:10px 0;   /* zona pulsable, invisible */
}
.footer nav a:hover{ color:#fff; }
.footer .legal{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; color:var(--text-dim); }
.footer .legal a:hover{ color:#fff; }
.footer .copy{ color:var(--text-dim); }

/* ------------------------------------------------------------
   Aparición al hacer scroll
   ------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width:1040px){
  .band{ flex-direction:column; gap:28px; padding:24px; }
  .band.reverse{ flex-direction:column; }
  .band .text{ flex:1 1 auto; max-width:100%; width:100%; }
  .band .media{ width:100%; }
  .band .media .ph{ width:100%; max-width:520px; }
  .portraits{ flex-wrap:wrap; padding:40px 24px; }
  .portraits .ph{ width:calc(50% - 5px); max-width:374px; height:auto; aspect-ratio:1/1; }
}

@media (max-width:820px){
  /* El menú se queda igual que en ordenador (11px, tracking 2.6, logo
     centrado). Lo único que se estrecha es la separación: con los 47px de
     escritorio mide 450px y en un móvil de 412 el primer enlace se sale
     de la pantalla. */
  .nav .links, .nav-side{ gap:18px; }

  .hero{ height:78vh; min-height:520px; }
  .hero h1{ font-size:38px; line-height:40px; width:auto; }
  .hero .sub{ margin-bottom:48px; }
  .eyebrow{ font-size:22px; line-height:24px; letter-spacing:7px; text-indent:7px; }
  .eyebrow--lg{ font-size:30px; line-height:34px; }
  .news{ height:auto; padding:110px 24px; }
  .footer nav{ gap:22px; }
}

@media (max-width:640px){
  .portraits .ph{ width:100%; }
  .strip li{ flex:0 0 220px; }
  .strip .thumb{ width:220px; height:124px; }
  .strip-wrap.marquee .strip{ --tarjeta:220px; --dur:25.6s; }
  .strip-wrap::before,.strip-wrap::after{ width:48px; }
}

/* ------------------------------------------------------------
   Aparición al hacer scroll
   ------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width:1040px){
  .band{ flex-direction:column; gap:28px; padding:24px; }
  .band.reverse{ flex-direction:column; }
  .band .text{ flex:1 1 auto; max-width:100%; width:100%; }
  .band .media{ width:100%; }
  .band .media .ph{ width:100%; max-width:520px; }
  .portraits{ flex-wrap:wrap; padding:40px 24px; }
  .portraits .ph{ width:calc(50% - 5px); max-width:374px; height:auto; aspect-ratio:1/1; }
}

@media (max-width:820px){
  /* El menú se queda igual que en ordenador (11px, tracking 2.6, logo
     centrado). Lo único que se estrecha es la separación: con los 47px de
     escritorio mide 450px y en un móvil de 412 el primer enlace se sale
     de la pantalla. */
  .nav .links, .nav-side{ gap:18px; }

  .hero{ height:78vh; min-height:520px; }
  .hero h1{ font-size:38px; line-height:40px; width:auto; }
  .hero .sub{ margin-bottom:48px; }
  .eyebrow{ font-size:22px; line-height:24px; letter-spacing:7px; text-indent:7px; }
  .eyebrow--lg{ font-size:30px; line-height:34px; }
  .news{ height:auto; padding:110px 24px; }
  .footer nav{ gap:22px; }
}

@media (max-width:640px){
  .portraits .ph{ width:100%; }
  .strip li{ flex:0 0 220px; }
  .strip .thumb{ width:220px; height:124px; }
  .strip-wrap.marquee .strip{ --tarjeta:220px; --dur:25.6s; }
  .strip-wrap::before,.strip-wrap::after{ width:48px; }
}

/* ------------------------------------------------------------
   Página del cursillo (/cursillo-flamenco)
   ------------------------------------------------------------ */
.hero--curso{ height:620px; }
.hero--curso h1{ font-size:47px; line-height:57px; width:auto; max-width:90vw; }

.cita{
  margin:0 0 20px; padding:0 0 0 18px;
  border-left:2px solid rgba(var(--accent-rgb),.75);
  font-family:var(--serif); font-size:14px; line-height:24px;
  color:rgba(255,255,255,.82); font-style:italic;
}
.cita-firma{
  display:block; margin-top:12px;
  font-family:var(--sans); font-style:normal;
  font-size:10px; letter-spacing:2.2px; text-indent:2.2px;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}

/* ------------------------------------------------------------
   Formulario de inscripción
   ------------------------------------------------------------ */
.ficha-caja{ width:420px; max-width:calc(100% - 48px); margin:44px auto 0; }
.ficha{
  background:linear-gradient(rgb(20,20,20) 0%, rgb(8,8,8) 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:23px;
  padding:34px 30px;
}
.ficha h3{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:23px; line-height:29px; letter-spacing:2.4px;
  text-transform:uppercase; text-indent:2.4px; color:#fff;
}
.ficha-sub{ margin:10px 0 26px; color:var(--text-dimmer); }
.ficha label{
  display:block; margin:0 0 7px;
  font-size:10px; letter-spacing:2.2px; text-indent:2.2px;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.ficha input{
  width:100%; height:44px; margin:0 0 18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:0 14px;
  color:#fff; font-family:var(--sans); font-size:16px; /* 16px evita que iOS haga zoom */
  outline:none; transition:border-color .25s ease;
}
.ficha input:focus{ border-color:rgba(var(--accent-rgb),.85); }
.ficha input[type=number]{ -moz-appearance:textfield; }
.ficha input[type=number]::-webkit-outer-spin-button,
.ficha input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ficha .pill{ width:100%; margin-top:6px; }
.ficha .pill:disabled{ opacity:.55; cursor:default; }
.ficha-error{ margin:0 0 16px; color:rgb(255,138,138); font-size:12px; line-height:16px; }
.ficha--hecho{ text-align:center; }
.ficha--hecho p{ margin:14px 0 0; color:var(--text-dim); }
.ficha-pie{ margin:18px 0 0; text-align:center; color:var(--text-dimmer); }
.ficha-pie a{ color:var(--text-dim); text-decoration:underline; }
.ficha-pie a:hover{ color:#fff; }

@media (max-width:640px){
  .hero--curso{ height:auto; min-height:74vh; }
  .hero--curso h1{ font-size:31px; line-height:39px; }
  .ficha{ padding:28px 22px; }
}