/*
Theme Name: Nora Feldenkrais Studio
Theme URI: https://norafeldenkrais.com
Author: Estudio
Description: Tema a medida del estudio. Petroleo, Poppins y los tres movimientos lentos.
Version: 2.2
Requires at least: 6.0
Tested up to: 7.1
License: GPLv2 or later
Text Domain: nora
*/

/* ---------------------------------------------------------------
   Poppins, servida desde este mismo dominio.
   No se pide nada a Google: ni la tipografia ni la IP de quien lee.
   Licencia SIL Open Font License 1.1 — assets/fuentes/LICENCIA-POPPINS.txt
--------------------------------------------------------------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;
 src:url('assets/fuentes/poppins-latin-300.woff2') format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
 src:url('assets/fuentes/poppins-latin-400.woff2') format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;
 src:url('assets/fuentes/poppins-latin-ext-300.woff2') format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
 src:url('assets/fuentes/poppins-latin-ext-400.woff2') format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


:root{--cal:#F4F2ED;--hueso:#EAE6DD;--hormc:#DAD4C9;--horm:#A69C8D;
 --petro:#245162;--prof:#16313B;--txt:#534E47;--txt2:#615B52}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--cal);color:var(--txt);
 font-family:'Poppins',system-ui,sans-serif;font-weight:300;line-height:1.7;font-size:16px}
.wrap{max-width:1120px;margin:0 auto;padding:0 30px}
h1,h2,h3,h4{font-weight:300;color:var(--petro);margin:0}
b,strong{font-weight:400}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-weight:300;cursor:pointer}

.top{border-bottom:1px solid var(--hormc);background:var(--cal);position:sticky;top:0;z-index:30}
.top .wrap{display:flex;align-items:center;gap:30px;height:78px}
.top img{height:30px}
nav{display:flex;gap:22px;margin-left:auto;align-items:center}
nav a{color:var(--txt2);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
 padding-bottom:3px;border-bottom:1px solid transparent}
nav a:hover{color:var(--petro)}
nav a.on{color:var(--petro);border-bottom-color:var(--petro)}
nav a.cta{border:1px solid var(--petro);color:var(--petro);padding:9px 18px;letter-spacing:.16em}
nav a.cta.on{background:var(--petro);color:var(--cal)}

.btn{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:14px 30px;
 transition:background-color .18s,color .18s,border-color .18s}
.btn.solido{background:var(--petro);color:var(--cal)}
.btn.linea{border:1px solid var(--petro);color:var(--petro)}
.btn.solido:hover{background:var(--prof)}
.btn.linea:hover{background:var(--petro);color:var(--cal)}
.btn:focus-visible{outline:2px solid var(--petro);outline-offset:3px}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

.portada{padding:84px 0 96px}
.portada .wrap{display:flex;gap:56px;align-items:center}
.portada .txt{flex:1.25}
.portada h1{font-size:40px;letter-spacing:.075em;text-transform:uppercase;line-height:1.45}
.portada p{font-size:17px;max-width:48ch;margin:24px 0 0}
.portada .fig{flex:1;min-width:0}
.portada .fig img{width:100%;transform:scaleX(-1)}

section{padding:86px 0}
section.hueso{background:var(--hueso)}
section.borde{border-top:1px solid var(--hormc)}
h2.tit{font-size:29px;letter-spacing:.075em;text-transform:uppercase;line-height:1.45;max-width:20ch}
h3.sub{font-size:22px;margin:0 0 16px}
.rot{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt2);margin:0 0 16px}
.cuerpo{max-width:62ch}
.cuerpo p{margin:0 0 16px}
.cuerpo p:last-child{margin:0}
.dos{display:flex;gap:64px;align-items:flex-start}
.dos > *{flex:1}
.dos.ancho > :last-child{flex:1.35}

.cita{border-left:2px solid var(--hormc);padding:6px 0 6px 26px;margin:34px 0;max-width:36ch}
.cita p{font-size:22px;color:var(--prof);line-height:1.5;margin:0}

.lista{list-style:none;padding:0;margin:0;max-width:62ch}
.lista li{padding:14px 0 14px 28px;border-bottom:1px solid var(--hormc);position:relative}
.lista li:first-child{border-top:1px solid var(--hormc)}
.lista li:before{content:'';position:absolute;left:0;top:25px;width:9px;height:1px;background:var(--horm)}

.precio{background:var(--cal);border:1px solid var(--hormc);padding:30px 34px;margin:32px 0 0;max-width:620px}
section.hueso .precio{background:var(--hueso)}
.precio .p{font-size:27px;color:var(--petro);margin:0 0 14px;line-height:1.35}
.precio p{margin:0 0 12px;font-size:15px}
.precio p:last-child{margin:0}
.nadie{font-size:14px;color:var(--txt2);margin:24px 0 0;max-width:54ch}

/* opciones de precio */
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;
 background:var(--hormc);border:1px solid var(--hormc);margin:32px 0 0}
.opciones > div{background:var(--cal);padding:30px 30px 26px;display:flex;flex-direction:column}
section.hueso .opciones > div{background:var(--hueso)}
.opciones .p{font-size:26px;color:var(--petro);line-height:1.3;margin:0 0 4px}
.opciones .mes{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);margin:0 0 18px}
.opciones ul{list-style:none;padding:0;margin:0}
.opciones li{font-size:14.5px;padding:0 0 9px 20px;position:relative}
.opciones li:before{content:'';position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--horm)}
.opciones .nota{font-size:13px;color:var(--txt2);margin:16px 0 0}
.letra{margin:22px 0 0;max-width:66ch}
.letra p{font-size:14px;color:var(--txt2);margin:0 0 9px}
.letra p:last-child{margin:0}
.letra b{color:var(--txt)}
.aviso{border-left:2px solid var(--hormc);padding:4px 0 4px 22px;margin:32px 0 0;max-width:62ch}
.aviso p{margin:0;font-size:15px}

.form{margin:34px 0 0;max-width:460px}
.campo{display:block}
.campo>span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--txt2);margin:0 0 9px}
.campo input{width:100%;font-family:inherit;font-size:15px;font-weight:300;color:var(--prof);
 background:transparent;border:1px solid var(--hormc);padding:14px 16px;border-radius:0;
 -webkit-appearance:none}
.campo input:focus{outline:none;border-color:var(--petro)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--txt2)}
.campo textarea{width:100%;font-family:inherit;font-size:15px;font-weight:300;color:var(--prof);
 background:transparent;border:1px solid var(--hormc);padding:14px 16px;border-radius:0;
 min-height:130px;resize:vertical;line-height:1.6;-webkit-appearance:none}
.campo textarea:focus{outline:none;border-color:var(--petro)}
.campo+.campo{margin-top:20px}
.casilla{display:flex;gap:13px;align-items:flex-start;margin:20px 0 0;cursor:pointer}
.casilla input{-webkit-appearance:none;appearance:none;flex:0 0 auto;width:16px;height:16px;
 margin:3px 0 0;border:1px solid var(--horm);background:transparent;cursor:pointer;position:relative}
.casilla input:checked{background:var(--petro);border-color:var(--petro)}
.casilla input:checked:after{content:'';position:absolute;left:4px;top:1px;width:5px;height:9px;
 border:solid var(--cal);border-width:0 1px 1px 0;transform:rotate(42deg)}
.casilla span{font-size:14px;color:var(--txt);line-height:1.6}
.form button.btn{margin-top:24px;border:0;font-family:inherit;cursor:pointer}
.form .letra a{color:var(--petro);border-bottom:1px solid var(--hormc)}

.horario{display:flex;gap:1px;background:var(--hormc);border:1px solid var(--hormc);margin:32px 0}
.horario div{background:var(--cal);flex:1;padding:20px 18px;text-align:center}
section.hueso .horario div{background:var(--hueso)}
.horario .d{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt2);display:block;margin-bottom:6px}
.horario .h{font-size:19px;color:var(--petro)}

.puertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
 background:var(--hormc);margin-top:44px;border:1px solid var(--hormc)}
.puerta{background:var(--cal);padding:34px 30px 28px;display:flex;flex-direction:column;min-height:250px}
.puerta:hover{background:var(--hueso)}
.puerta h3{font-size:21px;margin-bottom:14px}
.puerta p{font-size:15px;margin:0}
.puerta > p:last-of-type{margin-bottom:24px}
.puerta .ir{margin-top:auto;align-self:flex-start;font-size:11px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--petro);display:inline-flex;align-items:center;gap:9px;
 border:1px solid var(--petro);padding:11px 18px;transition:background-color .18s,color .18s}
.puerta:hover .ir{background:var(--petro);color:var(--cal)}
.puerta:hover .ir .tri{border-left-color:var(--cal)}
.puerta:focus-visible{outline:2px solid var(--petro);outline-offset:-3px}

/* Las vias de la portada: son la accion de cada tarjeta, no texto corrido. */
.vias{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:24px}
.vias a{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--petro);border:1px solid var(--petro);padding:11px 18px;
 transition:background-color .18s,color .18s}
.vias a:hover{background:var(--petro);color:var(--cal)}
.vias a:hover .tri{border-left-color:var(--cal)}
.vias a:focus-visible{outline:2px solid var(--petro);outline-offset:3px}
.tri{width:0;height:0;border-left:7px solid var(--petro);
 border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

.muestra .wrap{display:flex;gap:56px;align-items:center}

/* mapa */
.mapa{margin:36px 0 0;border:1px solid var(--hormc);background:var(--hueso)}
.mapa svg{display:block;width:100%;height:auto}
.mapa .pie{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
 padding:20px 26px;border-top:1px solid var(--hormc);background:var(--cal)}
.mapa .dir{color:var(--prof);font-size:15px}
.mapa .dir span{color:var(--txt2);display:block;font-size:13.5px}
.mapa .pie .btn{margin-left:auto}
.fg{width:240px;flex:none;opacity:.7;transform:scaleX(-1)}

footer{background:var(--prof);color:#A9B7BE;padding:70px 0 54px}
footer img{height:28px;margin-bottom:38px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:36px}
footer .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#A9B7BE;display:block;margin-bottom:9px}
footer p{margin:0;font-size:14px;line-height:1.75}
footer .legal{border-top:1px solid #24444F;margin-top:44px;padding-top:26px;font-size:13px;color:#A9B7BE}
footer .enlaces{border-top:0;margin-top:14px;padding-top:0;display:flex;gap:26px;flex-wrap:wrap}
footer .enlaces a{color:#A9B7BE;border-bottom:1px solid transparent}
footer .enlaces a:hover{color:var(--cal);border-bottom-color:#24444F}

.demo{background:var(--hormc);padding:12px 0}
.demo .wrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.demo span.et{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7C7362}
.demo button{background:transparent;border:1px solid #B9B0A0;color:#6E6656;
 font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px}
.demo button.on{background:var(--petro);border-color:var(--petro);color:var(--cal)}
.oculto{display:none}

@media(max-width:900px){
 .portada .wrap,.dos,.muestra .wrap{flex-direction:column;gap:34px}
 .portada h1{font-size:28px} h2.tit{font-size:23px}
 nav a:not(.cta){display:none} .horario{flex-wrap:wrap} .horario div{min-width:45%}
 .fg{width:170px}
}

/* ---------- los tres movimientos ----------
   Del prototipo del 22 de agosto. Van lentos a propósito: si se ven a la
   primera, no pegan con el método. Se apagan enteros más abajo para quien
   tenga activado «reducir movimiento» en su sistema. */

/* 1 · la banda de letras. 160 s en dar la vuelta */
.marquee{overflow:hidden;padding:22px 0;background:var(--hueso);
 border-top:1px solid var(--hormc);border-bottom:1px solid var(--hormc)}
.track{display:flex;width:max-content;animation:desfile 160s linear infinite}
.track span{font-size:11px;letter-spacing:.28em;text-transform:uppercase;
 color:var(--txt2);white-space:nowrap;padding-right:60px}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 2 · la figura respira. 4 px cada 11 s */
.respira{animation:respirar 11s ease-in-out infinite}
@keyframes respirar{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* 3 · los bloques aparecen al subir, cuando entran en pantalla */
.rise{opacity:0;transform:translateY(16px);
 transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
.rise.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
 .track,.respira{animation:none}
 .rise{opacity:1;transform:none;transition:none}
 html{scroll-behavior:auto}
}

/* ---------- el menú en pantallas pequeñas ----------
   Hasta ahora el menú desaparecía y solo quedaba «Escríbeme»:
   desde el móvil no se podía llegar a ninguna página. */
.abrir{display:none;margin-left:auto;background:none;border:0;padding:10px 4px;
 flex-direction:column;gap:5px;width:38px}
.abrir span{display:block;height:1px;width:24px;background:var(--petro);
 transition:transform .25s ease,opacity .2s ease}
.abrir[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.abrir[aria-expanded="true"] span:nth-child(2){opacity:0}
.abrir[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menu-movil{display:none;background:var(--hueso);border-bottom:1px solid var(--hormc)}
.menu-movil[hidden]{display:none !important}   /* si no, el display:block de abajo lo abriría solo */
.menu-movil .wrap{display:flex;flex-direction:column;padding-top:8px;padding-bottom:16px}
.menu-movil a{padding:15px 0;border-bottom:1px solid var(--hormc);
 font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt2)}
.menu-movil a:last-child{border-bottom:0;color:var(--petro)}
.menu-movil a.on{color:var(--petro)}

@media(max-width:900px){
 .abrir{display:flex}
 .top .wrap{gap:16px}
 nav{display:none}
 .menu-movil{display:block}
}
@media(prefers-reduced-motion:reduce){ .abrir span{transition:none} }

/* El formulario que pinta Brevo: ajustes que un input submit no hereda. */
.form input[type="submit"].btn{border:0;font-family:inherit;margin-top:24px;cursor:pointer;-webkit-appearance:none;appearance:none}
.form .sib-multi-lists{margin:0}
.form form{margin:0}
/* El plugin trae su display:none comentado; lo escondemos aqui.
   Cuando hay aviso, su guion pone display:block en linea y gana. */
.sib_msg_disp{display:none;font-size:14px;line-height:1.7;margin:18px 0 0;padding:14px 18px;border-left:2px solid var(--horm);background:var(--hueso);color:var(--txt)}
.sib_msg_disp.sib_msg_success{border-left-color:var(--petro);color:var(--prof)}
.sib-alert-message{font-size:14px;color:var(--txt);margin:12px 0 0}

/* ===============================================================
   LA BIBLIOTECA POR DENTRO
   La puerta, los filtros y la rejilla de clases.
   =============================================================== */

/* --- la puerta, para quien no ha entrado --- */
.puerta-biblio{padding:90px 0 110px}
.puerta-biblio .wrap{max-width:520px}
.puerta-biblio .tit{margin-bottom:20px}
.puerta-biblio .cuerpo{margin:0 0 34px}
.puerta-biblio form{margin:0}
.puerta-biblio p{margin:0 0 20px}
.puerta-biblio label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--txt2);margin:0 0 9px}
.puerta-biblio input[type="text"],
.puerta-biblio input[type="password"]{width:100%;font-family:inherit;font-size:15px;font-weight:300;
 color:var(--prof);background:transparent;border:1px solid var(--hormc);padding:14px 16px;
 border-radius:0;-webkit-appearance:none}
.puerta-biblio input:focus{outline:none;border-color:var(--petro)}
.puerta-biblio .login-remember{display:flex;align-items:center;gap:11px;margin:4px 0 22px}
.puerta-biblio .login-remember label{margin:0;font-size:14px;letter-spacing:0;text-transform:none;
 color:var(--txt);display:flex;align-items:center;gap:11px;cursor:pointer}
.puerta-biblio input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:16px;height:16px;
 border:1px solid var(--horm);background:transparent;cursor:pointer;position:relative;margin:0}
.puerta-biblio input[type="checkbox"]:checked{background:var(--petro);border-color:var(--petro)}
.puerta-biblio input[type="checkbox"]:checked:after{content:'';position:absolute;left:4px;top:1px;
 width:5px;height:9px;border:solid var(--cal);border-width:0 1px 1px 0;transform:rotate(42deg)}
.puerta-biblio input[type="submit"]{background:var(--petro);color:var(--cal);border:0;
 font-family:inherit;font-weight:300;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 padding:14px 30px;cursor:pointer;-webkit-appearance:none}
.puerta-biblio .nadie a{color:var(--petro);border-bottom:1px solid var(--hormc)}

/* --- la cabecera de dentro --- */
.biblio{padding:64px 0 100px}
.biblio-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
 padding-bottom:30px;border-bottom:1px solid var(--hormc)}
.biblio-cab .quien{font-size:13px;color:var(--txt2);margin:0}
.biblio-cab .quien a{color:var(--petro);border-bottom:1px solid var(--hormc);margin-left:8px}

/* --- los filtros --- */
.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:34px 46px;margin:36px 0 0}
.filtro .et{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt2);
 margin:0 0 14px}
.ops{display:flex;flex-wrap:wrap;gap:8px}
.ops button{font-size:13px;font-weight:300;color:var(--txt);background:transparent;
 border:1px solid var(--hormc);padding:8px 14px;line-height:1.3;
 transition:border-color .18s ease,color .18s ease}
.ops button span{color:var(--txt2);font-size:11.5px;margin-left:5px;
 font-variant-numeric:tabular-nums}
.ops button:hover:not(:disabled){border-color:var(--horm);color:var(--prof)}
.ops button.on{background:var(--petro);border-color:var(--petro);color:var(--cal)}
.ops button.on span{color:var(--hormc)}
/* El raton por encima le ganaba al seleccionado —mas peso en el selector—
   y el filtro elegido se veia apagado en vez de petroleo. */
.ops button.on:hover:not(:disabled){background:var(--prof);border-color:var(--prof);color:var(--cal)}
.ops button:disabled{opacity:.32;cursor:default}
.ops button:focus-visible{outline:2px solid var(--petro);outline-offset:2px}

/* --- el contador --- */
.cuantas{display:flex;align-items:baseline;gap:20px;margin:40px 0 0;
 padding-bottom:14px;border-bottom:1px solid var(--hormc)}
.cuantas p{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);
 font-variant-numeric:tabular-nums}
.cuantas button{background:none;border:0;padding:0;font-size:13px;color:var(--petro);
 border-bottom:1px solid var(--hormc);cursor:pointer}

/* --- la rejilla --- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
 gap:1px;background:var(--hormc);border:1px solid var(--hormc);border-top:0;margin:0}
.clase{background:var(--cal);padding:28px 28px 26px;display:flex;flex-direction:column}

/* El atributo hidden manda sobre cualquier display del tema.
   Sin esto, los filtros de la Biblioteca marcaban como ocultas las
   tarjetas que no encajaban y se seguian viendo las 49, porque
   .clase{display:flex} pesa mas que el display:none del navegador.
   El contador acertaba y la rejilla no cambiaba. 31 de agosto. */
[hidden]{display:none !important}
.clase .area{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt2);
 margin:0 0 12px}
.clase h2{font-size:19px;line-height:1.4;margin:0 0 10px;color:var(--petro)}
.clase .meta{font-size:12.5px;color:var(--txt2);margin:0 0 16px}
.clase .corta{font-size:14px;line-height:1.7;color:var(--txt);margin:0 0 22px;flex:1}
.clase .escuchar{align-self:flex-start;cursor:pointer;background:transparent}
.clase .sinsubir{font-size:13px;color:var(--txt2);margin:0;font-style:normal}

.vacio{margin:34px 0 0;font-size:15px;color:var(--txt2)}

@media(max-width:700px){
  .biblio{padding:44px 0 80px}
  .biblio-cab{flex-direction:column;align-items:flex-start;gap:14px}
  .filtros{gap:28px}
  .rejilla{grid-template-columns:1fr}
}

/* --- una clase suelta, con su reproductor --- */
.clase-sola{padding:52px 0 100px}
.clase-sola .wrap{max-width:820px}
.clase-sola .volver{margin:0 0 34px;font-size:13px}
.clase-sola .volver a{color:var(--txt2);border-bottom:1px solid var(--hormc)}
.clase-sola .volver a:hover{color:var(--petro)}
.clase-sola .tit{max-width:24ch;margin-bottom:12px}
.clase-sola .meta{font-size:13.5px;color:var(--txt2);margin:0 0 40px}
/* El reproductor es de Bunny, que es de video, y esto son audios: pintaba
   un rectangulo negro enorme con un altavoz en medio, media pantalla sin
   enseñar nada. Aqui se recorta a la barra de controles y punto.
   El iframe conserva su proporcion 16:9 y se ancla abajo; la ventana solo
   deja ver la franja de los mandos. Comprobado con la clase sonando: la
   barra NO se esconde sola. */
.reproductor{position:relative;height:62px;overflow:hidden;background:var(--prof);border:1px solid var(--hormc)}
.reproductor iframe{position:absolute;left:0;right:0;bottom:0;top:auto;
 width:100%;height:auto;aspect-ratio:16/9;border:0}
.aviso-audio{font-size:13.5px;color:var(--txt2);margin:16px 0 0;max-width:58ch}
.clase-sola .sub{font-size:20px}
@media(max-width:700px){
  .clase-sola{padding:34px 0 70px}
  .reproductor{padding-top:56%}
}


/* --- la pagina de gracias, al confirmar el correo --- */
.gracias{padding:80px 0 110px}
.gracias .wrap{max-width:560px}
.gracias .tit{margin-bottom:22px}
.gracias .tambien{margin:56px 0 0;padding:38px 0 0;border-top:1px solid var(--hormc)}
.gracias .tambien .tit{font-size:24px;margin-bottom:0}
.gracias .tambien .form{margin-top:26px}
.gracias .volver{margin:52px 0 0;font-size:13px}
.gracias .volver a{color:var(--txt2);border-bottom:1px solid var(--hormc)}
.gracias .volver a:hover{color:var(--petro)}
@media(max-width:700px){
  .gracias{padding:50px 0 80px}
  .gracias .tambien{margin-top:42px;padding-top:30px}
}

/* --- «De paso»: la casilla del resto de cosas, separada y con cuerpo --- */
.form .paso{margin:32px 0 0;padding-top:26px;border-top:1px solid var(--hormc)}
.form .paso .et{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt2);margin:0 0 12px}
.form .paso .casilla{margin:0}
.form .casilla span{font-size:15px}
.form .paso .casilla span{font-weight:400;color:var(--prof)}
.form .casilla input{width:17px;height:17px}
.form .casilla input:checked:after{height:10px}
.gracias .form .casilla span{font-weight:400;color:var(--prof)}

/* ---------------------------------------------------------------
   REGISTRO · la marca sobre el formulario del plugin

   El formulario lo pinta «User Registration» y su hoja de estilo se
   carga DESPUES de esta, asi que aqui hay que ganar por peso. Por eso
   los «!important»: no son descuido, son la unica forma de mandar sin
   tocar el orden de las hojas.

   Todo cuelga de «.registro», que solo existe en la pagina de registro,
   asi que esto no puede salpicar a ninguna otra pagina.

   Lo que habia antes: tarjeta blanca de 520 px, esquinas de 4 px,
   etiquetas #222 en Poppins 500, asterisco #FF4F55 (3,23:1, el unico
   fallo de contraste de la pagina) y boton #475BB2 azul violeta.
   --------------------------------------------------------------- */
.registro{padding:64px 0 90px}
.registro h1.tit{font-size:29px;letter-spacing:.075em;text-transform:uppercase;line-height:1.45;max-width:20ch}
.registro .cuerpo{margin-top:22px}
.registro .form{max-width:560px}
.registro .ya{margin:36px 0 0;font-size:15px;color:var(--txt2)}
.registro .ya a{color:var(--petro);border-bottom:1px solid var(--hormc)}

/* Fuera la tarjeta blanca: el formulario va sobre el fondo, como el resto */
.registro .user-registration,
.registro .ur-frontend-form{background:transparent!important;border:0!important;box-shadow:none!important;
 padding:0!important;margin:0!important;max-width:none!important;width:auto!important}
.registro form.register{background:transparent!important;padding:0!important;border:0!important}

/* Rejilla: una columna, y el ancho en linea del plugin no manda */
.registro .ur-form-row{display:block;margin:0}
.registro .ur-form-grid{width:100%!important;padding:0!important;margin:0!important}
.registro .ur-field-item{margin:0 0 26px;padding:0}
.registro .form-row{padding:0;margin:0}

/* Etiquetas: el gris de marca, no #222, y Poppins 400 en vez de 500 */
.registro .ur-label{display:block!important;font-family:inherit!important;font-size:10px!important;
 letter-spacing:.2em!important;text-transform:uppercase!important;font-weight:400!important;
 color:var(--txt2)!important;margin:0 0 9px!important;line-height:1.6}
.registro abbr.required{color:#8C3A2B!important;border:0!important;text-decoration:none!important;
 margin-left:5px;font-size:inherit}

/* Campos: esquina recta, borde hormigon, fondo del papel */
.registro .ur-frontend-field:not([type="checkbox"]):not([type="radio"]){
 width:100%!important;height:auto!important;min-height:0!important;font-family:inherit!important;
 font-size:15px!important;font-weight:300!important;line-height:1.6!important;color:var(--prof)!important;
 background:transparent!important;border:1px solid var(--hormc)!important;border-radius:0!important;
 padding:14px 16px!important;margin:0!important;box-shadow:none!important;
 -webkit-appearance:none;appearance:none}
.registro .ur-frontend-field:not([type="checkbox"]):not([type="radio"]):focus{
 outline:none;border-color:var(--petro)!important;box-shadow:none!important}
.registro .ur-frontend-field::placeholder{color:var(--txt2);opacity:1}
/* El grupo de la contrasena lleva tambien la clase de los iconos, asi que
   no se le puede sacar del flujo: se quedaba encima de su propia etiqueta. */
.registro .input-wrapper{display:block}
.registro .password-input-group{display:block;position:relative;height:auto}
.registro .password-input-group .ur-pass-icon,
.registro .password-input-group > span{position:absolute;right:14px;top:50%;
 transform:translateY(-50%);color:var(--txt2);cursor:pointer}
.registro input[type="number"]{-moz-appearance:textfield}
.registro input[type="number"]::-webkit-outer-spin-button,
.registro input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Consentimientos: la casilla de la casa.
   La etiqueta del campo va vacia -el formulario solo pinta ahi el
   asterisco, suelto y en su propia linea, encima de la casilla-, asi
   que se oculta. La casilla sigue siendo obligatoria: eso lo exige el
   formulario, no el color del asterisco. */
.registro .field-checkbox{margin:0 0 18px}
.registro .field-checkbox > .form-row > .ur-label{display:none!important}
.registro .field-checkbox ul{list-style:none;margin:0;padding:0}
.registro .ur-checkbox-list{display:flex;gap:12px;align-items:flex-start;margin:0}
.registro .input-checkbox{-webkit-appearance:none!important;appearance:none!important;flex:0 0 auto;
 width:17px!important;height:17px!important;margin:3px 0 0!important;padding:0!important;
 border:1px solid var(--horm)!important;background:transparent!important;border-radius:0!important;
 box-shadow:none!important;cursor:pointer;position:relative}
.registro .input-checkbox:checked{background:var(--petro)!important;border-color:var(--petro)!important}
.registro .input-checkbox:checked:after{content:'';position:absolute;left:4px;top:1px;width:5px;height:10px;
 border:solid var(--cal);border-width:0 1px 1px 0;transform:rotate(42deg)}
.registro .input-checkbox:focus-visible{outline:2px solid var(--petro);outline-offset:3px}
.registro .ur-checkbox-label{font-family:inherit!important;font-size:15px!important;font-weight:300!important;
 color:var(--txt)!important;line-height:1.6;cursor:pointer;margin:0!important}

/* El boton: el mismo «.btn.solido» que el resto del sitio */
.registro .ur-button-container{margin:34px 0 0!important;padding:0!important;display:flex}
.registro button.ur-submit-button{display:inline-block;font-family:inherit!important;font-size:11px!important;
 font-weight:300!important;letter-spacing:.18em!important;text-transform:uppercase!important;
 line-height:1!important;padding:16px 32px!important;border:1px solid var(--petro)!important;
 border-radius:0!important;background:var(--petro)!important;color:var(--cal)!important;
 box-shadow:none!important;cursor:pointer;transition:background-color .18s,border-color .18s;width:auto!important;margin:0!important}
.registro button.ur-submit-button:hover{background:var(--prof)!important;border-color:var(--prof)!important}
.registro button.ur-submit-button:focus-visible{outline:2px solid var(--petro);outline-offset:3px}

/* Avisos de error: el mismo rojo apagado que usa el cuaderno, 7,62:1 */
.registro .ur-error,.registro .user-registration-error,
.registro label.ur-error,.registro .ur-message.error{color:#8C3A2B!important;font-size:14px!important;
 font-weight:300!important;background:transparent!important;border:0!important;padding:6px 0 0!important;
 margin:0!important}
.registro .user-registration-message,.registro .ur-message.success{color:var(--petro)!important;
 background:transparent!important;border:0!important;font-size:15px!important;padding:6px 0 0!important}

@media(max-width:640px){
 .registro{padding:44px 0 64px}
 .registro h1.tit{font-size:23px}
 .registro .form{max-width:none}
}