hacklab/ENRE_WEB
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ENRE_WEB/index.css
SITO 7d5dbeec60 Cuenta de externas, arreglos de seguridad, títulos arriba y despliegue 
- Rol «externas» para la asamblea de externas: pide sin cupo, siempre con el
  colectivo de fuera y su contacto, y sus solicitudes salen en naranja hasta
  que la asamblea de la Enre las confirma.
- /pedir/ explica en una línea que los colectivos externos piden fecha en la
  asamblea de externas, los lunes de 19:00 a 20:00.
- Seguridad: argon2 limitado a dos cálculos a la vez y el intento se cuenta
  antes de calcular (60 accesos simultáneos llevaban el proceso a 3,8 GB);
  bloqueo por cuenta a 20 fallos para que no se pueda dejar fuera a la
  asamblea; avisos por sesión en vez de por URL; sig sin «..»; eventos de
  31 días como mucho; parámetros de argon2 acotados.
- Títulos pegados arriba en todas las páginas; la franja de la enredadera
  recupera ese alto para seguir llenando la pantalla.
- despliegue/: instalar.sh, cuenta.sh, servicio de systemd con el proceso
  encerrado, fragmento de nginx que además deja de servir .git y las notas
  internas, y configuración de ejemplo. Ninguna contraseña en el repositorio.
2026-09-23 12:15:33 +02:00

1536 lines
148 KiB
CSS
Raw Blame History

/* =========================================================================
CSO LA ENREDADERA DE TETUÁN
Dibujo de línea sobre verde. Contorno rosa, nervios verdes, tallo marrón.
De debajo del título salen varias raíces que se abren en columnas y de las
que cuelgan las hojas. No hay barra lateral: el menú va siempre en bocadillo.
1. Tokens 2. Base 3. Menú de bocadillo
4. Cabecera 5. Enredadera 6. Fichas
7. Calendarios 8. Textos 9. Pantallas
10. Móvil y variantes de la enredadera
11. Las redes que brotan 12. Foco de teclado
13. Calendario en pantallas estrechas
14. Los brotes en móvil 15. El menú en pantallas bajas
EL ORDEN IMPORTA, y no es cosmético. Varias reglas tienen la MISMA
especificidad que otras y ganan solo por ir después:
- "@media (max-width:1023px)" de los brotes (14) va al final a propósito:
la definición base de .brotes está en (11) y un bloque de móvil puesto
antes perdería.
- ".brotes > li:nth-child(N) .hoja" empata (0,3,1) con
".enredadera > li:nth-child(12n+N) .hoja" y gana por orden. Si mueves
uno de los dos, los brotes cogen el giro de la hoja madre.
Comprobado que no sobra nada: de los 147 selectores del fichero, los únicos
que hoy no casan con nada son los que ESPERAN hojas que aún no existen —la
tercera fila y cinco de los seis remates de fila par—. No hay reglas
muertas.
Y no cambies un valor buscándolo por su número: hazlo por su selector. Un
reemplazo global de "--giro" tocó sin querer la regla de móvil y dejó las
hojas del revés. Está contado en ../BITACORA.md.
========================================================================= */
/* ============================ 1. TOKENS ============================ */
:root{
/* Verde: el lienzo */
--verde: #e9f2de;
--verde-hondo: #dceace;
--verde-humo: #f5faef;
/* Los tres colores del dibujo */
--rosa: #ff00aa; /* contorno de la hoja y acentos */
--rosa-vivo: #ff5ec8; /* el núcleo encendido del neón */
}
:root{
/* Hasta dónde se ensancha la enredadera. Estaba en 1680 y dejaba 550px de
verde vacío a cada lado en una pantalla de 2560, y 240 hasta en una de
1920. Ojo: este número aparece DOS veces —el tope de la caja y el cálculo
de --col— y tienen que ir juntos, o las hojas dejan de caber en su
columna. Por eso es una variable. */
--ancho-max: 2300px;
/* El sitio es claro siempre: no tiene variante oscura. Sin declararlo, un
navegador en tema oscuro pinta EN OSCURO lo que no controla el CSS —barras
de desplazamiento, controles de formulario, el lienzo antes de que cargue
la hoja— sobre un diseño claro. Declararlo es decirle a qué atenerse. */
color-scheme: light;
--rosa-encendido:#c20081; /* el rosa del ratón encima: mismo tono que --rosa
pero legible (4.6:1 sobre el verde más oscuro,
5.5:1 sobre el más claro). Con --rosa daba 3.1
y el texto se leía PEOR al pasar el ratón que
en reposo, que es justo al revés de lo que toca. */
--verde-vivo: #00d18e; /* nervios y zarcillos: verde chillón tirando a azul.
Es adorno: sobre el fondo no llega a 3:1, así que
la silueta la sostiene el contorno rosa, no él. */
--verde-hoja: #3a6b4d; /* el mismo verde, pero legible: 5.4:1 sobre el fondo,
que es lo que pide AA para texto normal */
--negro: #14170f; /* la segunda hebra de la raíz */
--rosa-tenue: rgba(255,0,170,.28);
--rosa-papel: rgba(255,0,170,.07);
--rosa-legible:#a8006a; /* 6.3:1 sobre el verde: este sí vale para texto,
y también como FONDO con texto claro encima (6.9:1);
--rosa de fondo con texto claro da 3.4:1 y no vale */
--tinta: #1e2a17;
--tinta-suave: #4d5b43;
--pluma: 1.6px;
--curva: 3px;
/* Tipos: los mismos que tenía la web desde el principio */
--titular: 'Anton', Impact, Haettenschweiler, 'Arial Black', sans-serif;
--mano: 'Rock Salt', cursive;
--marca: 'Code462WPink', 'Anton', Impact, sans-serif;
/* Para textos largos: la versión anterior declaraba Quicksand sin llegar a
importarla, así que caía en la del sistema. Se conserva ese
comportamiento, porque Rock Salt a dieciocho párrafos no hay quien la lea. */
--lectura: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@font-face{
font-family:'Code462WPink';
src:url('/Code462WPink-Regular.ttf') format('truetype');
font-weight:normal; font-style:normal; font-display:swap;
}
/* Anton y Rock Salt, servidas desde aquí. Antes las traía cada página con un
<link> a fonts.googleapis.com: eso son dos conexiones más antes de pintar
nada y, sobre todo, la IP de cada persona que entra en la web de un centro
social okupado pasando por Google. Son los subconjuntos latinos, 77 KB entre
las dos, los mismos ficheros que servía Google: se ve exactamente igual. */
@font-face{
font-family:'Anton';
src:url('/fuentes/anton-latin.woff2') format('woff2');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Rock Salt';
src:url('/fuentes/rocksalt-latin.woff2') format('woff2');
font-weight:400; font-style:normal; font-display:swap;
}
/* ============================ 2. BASE ============================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }
body{
background:var(--verde);
color:var(--tinta);
font-family:var(--mano);
font-size:clamp(.8rem,.74rem + .2vw,.92rem);
line-height:2;
-webkit-font-smoothing:antialiased;
}
body::before{
content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(ellipse 70% 50% at 15% -5%, #ffffff8c, transparent 70%),
radial-gradient(ellipse 60% 50% at 95% 25%, var(--verde-hondo), transparent 65%),
radial-gradient(ellipse 90% 45% at 50% 105%, var(--verde-hondo), transparent 70%);
}
a{ color:var(--rosa-legible); text-underline-offset:.2em; }
a:hover, a:active{ color:var(--rosa-encendido); }
:focus-visible{
outline:3px solid var(--tinta);
outline-offset:3px;
border-radius:2px;
}
/* Sobre la barra oscura del Tattoo Circus o cualquier fondo oscuro, la tinta
no se vería: ahí el anillo va en crema. */
.sidebar :focus-visible{ outline-color:var(--tinta); }
img{ max-width:100%; height:auto; display:block; }
.sr-only{
position:absolute!important; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap; border:0;
}
.defs{ position:absolute; width:0; height:0; overflow:hidden; }
.container{ display:block; }
.main{ display:block; padding-bottom:0; }
/* ==================== 3. MENÚ DE BOCADILLO ====================
El mismo en móvil y en ordenador. Al abrirlo la letra es grande, para que
se lea de un vistazo en un portátil. */
.sb-toggle{
position:fixed; inset:20px auto auto 20px; z-index:1001;
width:58px; height:58px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
font-size:0; color:transparent;
background:var(--verde-humo);
border:2px solid var(--rosa); border-radius:50%;
transition:box-shadow .2s, transform .25s;
}
/* El botón del menú es un <label>: quien tabula aterriza en el <input>
escondido, que no se ve. Es la PRIMERA parada de tabulación de todas las
páginas, así que sin esto el primer Tab no marcaba nada. El anillo se pinta
sobre el <label>, que es lo que sí se ve. */
#nav-toggle:focus-visible ~ .sb-toggle{
outline:3px solid var(--tinta); outline-offset:3px;
}
.sb-toggle::before{
content:""; width:25px; height:15px;
border-top:2.5px solid var(--rosa);
border-bottom:2.5px solid var(--rosa);
}
.sb-toggle:hover, .sb-toggle:active{ box-shadow:0 0 0 1px var(--rosa), 0 0 18px var(--rosa-tenue); }
#nav-toggle:checked ~ .sb-toggle{ transform:rotate(90deg); }
.sb-overlay{
display:none; position:fixed; inset:0; z-index:999;
background:rgba(30,42,23,.42); backdrop-filter:blur(3px); cursor:pointer;
}
#nav-toggle:checked ~ .sb-overlay{ display:block; }
.sidebar{
position:fixed; top:0; left:0; z-index:1000;
width:min(92vw,480px); height:100vh; overflow-y:auto;
padding:92px 44px 40px;
background:var(--verde-humo);
border-right:2px solid var(--rosa);
transform:translateX(-100%);
transition:transform .32s cubic-bezier(.4,0,.2,1);
}
#nav-toggle:checked ~ .container .sidebar{ transform:translateX(0); }
.sidebar .logo{ width:48px; margin:0 0 14px; }
.sidebar .sb-marca{
font-family:var(--marca); color:var(--rosa);
/* La fuente del titular monta unas letras sobre otras en minuscula: en
"La Enredadera" la ultima "a" se subia encima de la anterior. En
mayusculas dibuja bien, que es como va el titulo de la portada. */
text-transform:uppercase; letter-spacing:.02em;
font-size:1.7rem; line-height:1.2; margin:0 0 12px;
}
.sidebar .lema{
font-family:var(--mano); font-size:.66rem; line-height:2.2;
color:var(--tinta-suave); margin:0 0 24px;
padding-bottom:20px; border-bottom:var(--pluma) solid var(--rosa-tenue);
}
.sidebar-nav ul{ list-style:none; margin:0; padding:0; }
.sidebar-nav li{ margin-bottom:4px; }
.sidebar-nav a{
display:block; position:relative; padding:10px 0 10px 36px;
font-family:var(--titular);
font-size:clamp(1.4rem,1.1rem + .85vw,2rem);
line-height:1.15; letter-spacing:.03em; text-transform:uppercase;
text-decoration:none; color:var(--tinta);
transition:color .18s, padding-left .18s;
}
.sidebar-nav a::before{
content:""; position:absolute; left:0; top:50%;
width:12px; height:12px; margin-top:-6px;
border:2px solid var(--rosa); border-radius:50%;
transition:background .18s, box-shadow .18s;
}
/* En un móvil no hay :hover, así que sin :active el toque no responde.
Se añade en todo lo pulsable. Fuera queda .tarjeta, que es un div y no
lleva a ninguna parte: encenderla al apoyar el dedo sería mentir. */
.sidebar-nav a:hover,
.sidebar-nav a:active,
.sidebar-nav a[aria-current="page"]{ color:var(--rosa-encendido); padding-left:44px; }
.sidebar-nav a:hover::before,
.sidebar-nav a:active::before,
.sidebar-nav a[aria-current="page"]::before{
background:var(--rosa); box-shadow:0 0 10px var(--rosa), 0 0 22px var(--rosa-tenue);
}
/* ============================ 4. CABECERA ============================ */
.cabecera{ padding:clamp(100px,10vw,140px) clamp(20px,5vw,60px) 0; text-align:center; }
.cabecera h1{
margin:0; font-family:var(--marca);
font-size:clamp(1.9rem,1rem + 3.4vw + 1.6vh,4.6rem);
line-height:1.08; letter-spacing:.01em;
text-transform:uppercase; color:var(--rosa); text-wrap:balance;
}
.cabecera .sub{
font-family:var(--mano);
margin:clamp(8px,1.2vh,16px) auto 0; max-width:70ch;
font-size:clamp(.66rem,.58rem + .26vw,.86rem);
letter-spacing:.04em; line-height:2.1; color:var(--tinta-suave);
/* Sin esto, a 430px partía dejando «2009» solo en la segunda línea. */
text-wrap:balance;
}
.volver{
display:inline-flex; align-items:center; gap:10px;
min-height:44px; /* medía 27: por debajo del mínimo táctil */
margin:26px 0 0 clamp(20px,5vw,60px);
font-family:var(--titular);
font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
text-decoration:none; color:var(--tinta-suave);
border-bottom:var(--pluma) solid var(--rosa-tenue);
transition:color .2s, border-color .2s, gap .2s;
}
.volver:hover, .volver:active{ color:var(--rosa-encendido); border-color:var(--rosa); gap:16px; }
/* En todas las páginas el título va pegado arriba y el contenido pegado al
título, para aprovechar la pantalla. Antes había 100-140px de aire encima. */
.cabecera .sub{ margin-top:4px; line-height:1.7; }
.volver{ margin-top:6px; }
@media (min-width:1024px){
/* El botón del menú es fijo y ocupa de 20 a 78px en las dos direcciones.
100px a cada lado (simétricos, para que el título siga centrado) bastan
para que un título largo no se meta debajo aunque empiece a 22px. En
móvil no hay anchura para eso y el título sigue bajo el botón: ver el
bloque de max-width:1023px. */
.cabecera{ padding:22px 100px 0; }
}
/* ========================== 5. LA ENREDADERA ==========================
Del título bajan varias raíces que se abren en columnas. De cada columna
cuelgan hojas alternando de lado. Cada hoja lleva su propio trozo de tallo
como fondo, así que las columnas se dibujan solas por muchas hojas que
haya: añadir una hoja sigue siendo añadir un <li>. */
.enredadera-wrap{
position:relative; overflow-x:clip;
max-width:var(--ancho-max); margin:0 auto;
padding:0 clamp(30px,5vw,110px) 0;
/* El ancho util, o sea la caja donde se pinta todo. La bajada del titulo se
mide EN PROPORCION a el: su viewBox es de 1000x72, asi que con el 7.2%
del ancho la escala sale igual en horizontal y en vertical y el dibujo no
se deforma en ninguna pantalla. Antes la altura iba en vh y el trazo se
estiraba un 45% a lo ancho: por eso las dos hebras se solapaban. */
--rejilla:calc(min(var(--ancho-max), 100vw) - 2 * clamp(30px,5vw,110px));
--bajada:calc(var(--rejilla) * .072);
}
/* Las raíces que salen de debajo del título y bajan al centro de cada
columna. Se estiran con el ancho, así que los extremos caen donde toca. */
.enredadera-wrap::before{
content:""; display:block; height:clamp(96px,13vw,180px);
/*@entrada*/background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%2072%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%2314170f%22%20stroke=%22%2314170f%22%20stroke-width=%22.7%22%20stroke-linejoin=%22round%22%20d=%22M329.9%2018.9%20L325.3%2019%20L320.7%2019.2%20L316.1%2019.8%20L311.5%2020.7%20L307%2021.8%20L302.6%2023.1%20L298.3%2024.3%20L294.1%2025.3%20L290%2026%20L286%2026.2%20L282%2026.1%20L278.1%2025.4%20L274.2%2024.3%20L270.3%2022.7%20L266.4%2020.8%20L262.4%2018.7%20L258.4%2016.5%20L254.4%2014.3%20L250.3%2012.4%20L246.2%2010.9%20L242%209.9%20L237.8%209.5%20L233.6%209.9%20L229.5%2010.9%20L225.5%2012.6%20L221.6%2014.7%20L217.9%2017.2%20L214.3%2019.8%20L210.8%2022.5%20L207.4%2025%20L204.1%2027.2%20L201%2029%20L198%2030.3%20L195.1%2031.1%20L192.4%2031.3%20L189.6%2031%20L186.9%2030.3%20L184%2029.1%20L181%2027.4%20L177.9%2025.5%20L174.8%2023.3%20L171.7%2021%20L168.5%2018.8%20L165.2%2016.7%20L161.9%2014.9%20L158.6%2013.5%20L155.2%2012.5%20L151.7%2012.1%20L148.3%2012.1%20L145%2012.7%20L141.8%2013.8%20L138.8%2015.2%20L135.9%2016.9%20L133.1%2018.7%20L130.5%2020.5%20L128%2022.4%20L125.5%2024.1%20L123.2%2025.7%20L121%2027.1%20L118.8%2028.3%20L116.8%2029.1%20L114.8%2029.8%20L112.8%2030.2%20L110.9%2030.4%20L108.9%2030.3%20L106.9%2030.2%20L104.9%2029.8%20L102.8%2029.3%20L100.6%2028.8%20L98.4%2028.2%20L96.2%2027.5%20L93.9%2026.9%20L91.7%2026.4%20L89.4%2025.9%20L87.1%2025.6%20L84.8%2025.4%20L82.5%2025.4%20L80.3%2025.5%20L78.1%2025.8%20L75.9%2026.2%20L73.9%2026.8%20L71.8%2027.6%20L69.9%2028.5%20L68.7%2029.2%20L67.6%2029.3%20L65.9%2029.6%20L64.2%2030%20L62.6%2030.3%20L60.9%2030.6%20L59.3%2031%20L57.8%2031.4%20L56.2%2031.7%20L54.7%2032.1%20L53.3%2032.5%20L51.8%2032.9%20L50.4%2033.3%20L49%2033.7%20L47.6%2034.1%20L46.2%2034.6%20L44.9%2035%20L43.6%2035.4%20L42.4%2035.9%20L41.1%2036.4%20L39.9%2036.8%20L38.7%2037.3%20L37.5%2037.8%20L36.4%2038.3%20L35.3%2038.9%20L34.2%2039.4%20L33.1%2039.9%20L32.1%2040.5%20L31%2041%20L30%2041.6%20L29.1%2042.2%20L28.1%2042.8%20L27.2%2043.4%20L26.3%2044%20L25.4%2044.7%20L24.6%2045.3%20L23.8%2046%20L23%2046.7%20L22.2%2047.3%20L21.5%2048.1%20L20.7%2048.8%20L20%2049.5%20L19.4%2050.3%20L18.7%2051%20L18.1%2051.8%20L17.5%2052.6%20L17%2053.4%20L16.4%2054.2%20L15.9%2055%20L15.4%2055.9%20L15%2056.7%20L14.6%2057.6%20L14.2%2058.5%20L13.8%2059.4%20L13.5%2060.3%20L13.1%2061.2%20L12.9%2062.2%20L12.6%2063.1%20L12.4%2064%20L12.2%2065%20L12%2066%20L11.8%2067%20L11.7%2068%20L11.6%2069%20L11.6%2070%20L11.5%2071%20L11.5%2071.9%20L20.5%2072.1%20L20.5%2071.2%20L20.5%2070.4%20L20.6%2069.6%20L20.6%2068.9%20L20.7%2068.1%20L20.8%2067.4%20L20.9%2066.7%20L21.1%2066%20L21.2%2065.3%20L21.4%2064.6%20L21.6%2063.9%20L21.8%2063.3%20L22.1%2062.6%20L22.3%2062%20L22.6%2061.3%20L22.9%2060.7%20L23.2%2060.1%20L23.6%2059.5%20L23.9%2058.9%20L24.3%2058.3%20L24.7%2057.7%20L25.1%2057.1%20L25.6%2056.5%20L26%2056%20L26.5%2055.4%20L27%2054.9%20L27.6%2054.3%20L28.2%2053.7%20L28.8%2053.2%20L29.4%2052.7%20L30%2052.1%20L30.7%2051.6%20L31.4%2051.1%20L32.1%2050.6%20L32.9%2050%20L33.7%2049.5%20L34.5%2049%20L35.3%2048.5%20L36.2%2048%20L37.1%2047.5%20L38%2047.1%20L39%2046.6%20L40%2046.1%20L41%2045.7%20L42%2045.2%20L43.1%2044.7%20L44.2%2044.3%20L45.3%2043.9%20L46.5%2043.4%20L47.7%2043%20L48.9%2042.6%20L50.1%2042.2%20L51.4%2041.8%20L52.7%2041.4%20L54.1%2041%20L55.4%2040.6%20L56.8%2040.2%20L58.3%2039.8%20L59.7%2039.4%20L61.2%2039.1%20L62.8%2038.7%20L64.3%2038.4%20L65.9%2038%20L67.5%2037.7%20L69.1%2037.3%20L71.5%2036.8%20L73.5%2035.7%20L74.9%2035.1%20L76.4%2034.5%20L77.9%2034.1%20L79.5%2033.7%20L81.1%2033.5%20L82.7%2033.4%20L84.4%2033.4%20L86.2%2033.5%20L88.1%2033.7%20L90%2034.1%20L92%2034.6%20L94.2%2035.1%20L96.4%2035.7%20L98.6%2036.3%20L101%2036.9%20L103.5%2037.4%20L106%2037.8%20L108.6%2038%20L111.3%2038%20L114%2037.7%20L116.7%2037.1%20L119.4%2036.2%20L122.1%2035%20L124.7%2033.6%20L127.3%2032%20L129.8%2030.2%20L132.3%2028.3%20L134.8%2026.5%20L137.3%2024.7%20L139.7%2023%20L142.1%2021.6%20L144.5%2020.4%20L146.8%2019.6%20L149.1%2019.2%20L151.4%2019.1%20L153.8%2019.4%20L156.3%2020%20L159%2021.1%20L161.8%2022.6%20L164.8%2024.5%20L167.8%2026.5%20L171%2028.7%20L174.3%2031%20L177.7%2033.1%20L181.2%2034.9%20L184.8%2036.4%20L188.6%2037.3%20L192.4%2037.6%20L196.3%2037.2%20L200.1%2036.1%20L203.8%2034.5%20L207.4%2032.3%20L210.9%2029.9%20L214.4%2027.2%20L217.8%2024.5%20L221.2%2021.9%20L224.6%2019.5%20L228%2017.6%20L231.3%2016.2%20L234.6%2015.3%20L237.8%2014.9%20L241.2%2015.1%20L244.7%2015.9%20L248.4%2017.2%20L252.2%2018.8%20L256.1%2020.8%20L260.2%2022.9%20L264.3%2025%20L268.5%2026.9%20L272.8%2028.5%20L277.2%2029.7%20L281.6%2030.3%20L286.1%2030.4%20L290.5%2029.9%20L294.9%2029.1%20L299.3%2027.9%20L303.7%2026.5%20L308%2025.1%20L312.3%2023.8%20L316.6%2022.7%20L321%2021.9%20L325.5%2021.3%20L330.1%2020.4%20Z%22/%3E%3Cpath%20fill=%22%23ff00aa%22%20stroke=%22%23ff00aa%22%20stroke-width=%22.6%22%20stroke-linejoin=%22round%22%20d=%22M330.1%2021.9%20L325.5%2021.4%20L321%2021%20L316.5%2020.3%20L312.1%2019.4%20L307.7%2018.2%20L303.3%2017%20L298.9%2015.7%20L294.6%2014.7%20L290.2%2014%20L285.8%2013.7%20L281.5%2013.9%20L277.2%2014.7%20L272.9%2015.9%20L268.8%2017.7%20L264.7%2019.7%20L260.6%2021.9%20L256.7%2024.2%20L252.8%2026.3%20L249%2028.2%20L245.3%2029.7%20L241.7%2030.6%20L238.2%2031%20L234.7%2030.8%20L231.2%2030%20L227.7%2028.6%20L224.2%2026.8%20L220.6%2024.6%20L217.1%2022.2%20L213.5%2019.6%20L209.9%2017.1%20L206.3%2014.9%20L202.6%2013%20L199%2011.6%20L195.3%2010.8%20L191.6%2010.7%20L188%2011.2%20L184.5%2012.3%20L181.1%2013.9%20L177.8%2016%20L174.6%2018.3%20L171.5%2020.7%20L168.5%2023.2%20L165.6%2025.6%20L162.7%2027.7%20L160%2029.5%20L157.3%2030.9%20L154.7%2031.9%20L152.2%2032.4%20L149.7%2032.6%20L147.2%2032.4%20L144.6%2031.8%20L142.1%2030.9%20L139.4%2029.7%20L136.8%2028.3%20L134.1%2026.8%20L131.4%2025.3%20L128.6%2023.8%20L125.9%2022.4%20L123.2%2021.2%20L120.4%2020.2%20L117.7%2019.5%20L115%2019%20L112.3%2018.9%20L109.7%2019.1%20L107.1%2019.5%20L104.7%2020.2%20L102.3%2021.1%20L100%2022%20L97.8%2023.1%20L95.7%2024.2%20L93.6%2025.3%20L91.6%2026.3%20L89.7%2027.3%20L87.8%2028.2%20L86%2029%20L84.2%2029.6%20L82.4%2030.1%20L80.7%2030.5%20L79%2030.8%20L77.3%2030.9%20L75.6%2031%20L73.9%2031%20L72.2%2030.8%20L70%2030.5%20L67.9%2030.9%20L66.2%2031.2%20L64.5%2031.5%20L62.9%2031.9%20L61.3%2032.2%20L59.7%2032.6%20L58.2%2032.9%20L56.6%2033.3%20L55.1%2033.7%20L53.7%2034.1%20L52.2%2034.5%20L50.8%2034.9%20L49.4%2035.3%20L48.1%2035.7%20L46.8%2036.1%20L45.5%2036.6%20L44.2%2037%20L42.9%2037.5%20L41.7%2037.9%20L40.5%2038.4%20L39.3%2038.9%20L38.2%2039.4%20L37.1%2039.9%20L36%2040.4%20L34.9%2040.9%20L33.9%2041.4%20L32.9%2041.9%20L31.9%2042.5%20L30.9%2043.1%20L30%2043.6%20L29.1%2044.2%20L28.2%2044.8%20L27.3%2045.4%20L26.5%2046%20L25.7%2046.6%20L24.9%2047.3%20L24.1%2047.9%20L23.4%2048.6%20L22.7%2049.3%20L22%2050%20L21.3%2050.7%20L20.7%2051.4%20L20.1%2052.1%20L19.5%2052.8%20L18.9%2053.6%20L18.4%2054.3%20L17.9%2055.1%20L17.4%2055.9%20L17%2056.7%20L16.5%2057.5%20L16.1%2058.3%20L15.8%2059.2%20L15.4%2060%20L15.1%2060.9%20L14.8%2061.7%20L14.5%2062.6%20L14.3%2063.5%20L14.1%2064.4%20L13.9%2065.3%20L13.7%2066.3%20L13.6%2067.2%20L13.5%2068.1%20L13.4%2069.1%20L13.3%2070%20L13.3%2071%20L13.3%2072%20L18.7%2072%20L18.8%2071.2%20L18.8%2070.3%20L18.8%2069.5%20L18.9%2068.7%20L19%2067.9%20L19.1%2067.1%20L19.2%2066.4%20L19.4%2065.6%20L19.6%2064.9%20L19.8%2064.1%20L20%2063.4%20L20.2%2062.7%20L20.5%2062%20L20.7%2061.3%20L21%2060.6%20L21.4%2059.9%20L21.7%2059.3%20L22.1%2058.6%20L22.5%2058%20L22.9%2057.3%20L23.3%2056.7%20L23.8%2056.1%20L24.2%2055.5%20L24.7%2054.9%20L25.3%2054.3%20L25.8%2053.7%20L26.4%2053.1%20L27%2052.5%20L27.6%2051.9%20L28.3%2051.4%20L29%2050.8%20L29.7%2050.2%20L30.4%2049.7%20L31.2%2049.2%20L32%2048.6%20L32.8%2048.1%20L33.6%2047.6%20L34.5%2047.1%20L35.4%2046.6%20L36.3%2046.1%20L37.3%2045.6%20L38.2%2045.1%20L39.3%2044.6%20L40.3%2044.1%20L41.4%2043.7%20L42.5%2043.2%20L43.6%2042.8%20L44.7%2042.3%20L45.9%2041.9%20L47.1%2041.4%20L48.4%2041%20L49.6%2040.6%20L50.9%2040.2%20L52.3%2039.8%20L53.6%2039.4%20L55%2039%20L56.4%2038.6%20L57.9%2038.2%20L59.4%2037.9%20L60.9%2037.5%20L62.4%2037.1%20L64%2036.8%20L65.6%2036.4%20L67.2%2036.1%20L68.8%2035.8%20L70.1%2035.5%20L71.6%2035.7%20L73.6%2035.9%20L75.6%2035.9%20L77.6%2035.8%20L79.6%2035.6%20L81.6%2035.3%20L83.7%2034.8%20L85.7%2034.2%20L87.7%2033.5%20L89.8%2032.6%20L91.8%2031.6%20L93.8%2030.6%20L95.9%2029.5%20L97.9%2028.4%20L99.9%2027.3%20L102%2026.3%20L104%2025.4%20L106.1%2024.7%20L108.1%2024.1%20L110.2%2023.7%20L112.4%2023.5%20L114.5%2023.6%20L116.8%2024%20L119.1%2024.5%20L121.5%2025.4%20L124%2026.5%20L126.6%2027.7%20L129.2%2029.2%20L131.9%2030.7%20L134.7%2032.2%20L137.6%2033.6%20L140.5%2034.9%20L143.5%2035.9%20L146.5%2036.6%20L149.6%2036.9%20L152.8%2036.6%20L155.9%2035.9%20L159%2034.7%20L162.1%2033%20L165.1%2031%20L168.1%2028.8%20L171.1%2026.3%20L174.1%2023.8%20L177%2021.4%20L180%2019.2%20L183%2017.3%20L185.9%2015.9%20L188.9%2014.9%20L191.8%2014.4%20L194.8%2014.5%20L197.9%2015.2%20L201.2%2016.4%20L204.5%2018.1%20L207.9%2020.2%20L211.5%2022.5%20L215.1%2025%20L218.8%2027.5%20L222.5%2029.8%20L226.4%2031.7%20L230.3%2033.1%20L234.3%2034%20L238.3%2034.2%20L242.3%2033.7%20L246.3%2032.6%20L250.3%2031%20L254.2%2029%20L258.1%2026.7%20L262%2024.4%20L266%2022.1%20L269.9%2020.1%20L273.8%2018.4%20L277.8%2017.1%20L281.8%2016.4%20L285.8%2016.1%20L290%2016.3%20L294.2%2016.9%20L298.4%2017.8%20L302.8%2018.9%20L307.2%2020.1%20L311.7%2021.1%20L316.2%2021.9%20L320.8%2022.4%20L325.4%2022.6%20L330%2022.8%20Z%22/%3E%3Cpath%20fill=%22%2300d18e%22%20d=%22M329.6%2022.5%20L331%2022.9%20L332.4%2023.3%20L333.8%2023.6%20L335.2%2023.9%20L336.6%2024.2%20L338%2024.5%20L339.4%2024.8%20L340.8%2025%20L342.3%2025.2%20L343.7%2025.4%20L345.1%2025.5%20L346.6%2025.6%20L348%2025.6%20L349.4%2025.6%20L350.8%2025.5%20L352.3%2025.4%20L353.7%2025.3%20L355.1%2025.1%20L356.5%2024.9%20L357.9%2024.6%20L359.3%2024.3%20L360.7%2024%20L362.1%2023.7%20L363.5%2023.3%20L364.9%2023%20L366.2%2022.7%20L367.4%2022.5%20L368.6%2022.1%20L369.8%2021.6%20L370.9%2020.9%20L371.9%2020.1%20L372.7%2019.1%20L373.4%2018.1%20L374%2017%20L374.3%2015.9%20L374.6%2014.7%20L374.6%2013.5%20L374.5%2012.3%20L374.2%2011.2%20L373.8%2010.1%20L373.3%209.1%20L372.6%208.2%20L371.8%207.4%20L370.9%206.7%20L370%206.2%20L369%205.8%20L367.9%205.6%20L366.9%205.5%20L365.9%205.5%20L364.9%205.7%20L363.9%206%20L363%206.4%20L362.2%207%20L361.4%207.6%20L360.8%208.4%20L360.3%209.2%20L359.9%2010%20L359.7%2010.9%20L359.5%2011.8%20L359.5%2012.7%20L359.6%2013.6%20L359.9%2014.4%20L360.2%2015.2%20L360.6%2016%20L361.2%2016.6%20L361.8%2017.2%20L362.4%2017.6%20L363.1%2018%20L363.9%2018.3%20L364.7%2018.4%20L365.4%2018.4%20L366.2%2018.4%20L366.9%2018.2%20L367.6%2018%20L368.2%2017.6%20L368.7%2017.2%20L369.2%2016.7%20L369.6%2016.2%20L370%2015.6%20L370.2%2015%20L370.4%2014.4%20L370.4%2013.8%20L370.4%2013.1%20L370.3%2012.5%20L370.1%2012%20L369.8%2011.5%20L369.5%2011%20L369.1%2010.6%20L368.7%2010.3%20L368.2%2010%20L367.8%209.8%20L367.3%209.7%20L366.8%209.6%20L366.3%209.6%20L365.8%209.7%20L365.4%209.8%20L365%2010%20L364.7%2010.3%20L364.3%2010.6%20L364.1%2010.9%20L363.9%2011.2%20L363.7%2011.6%20L363.6%2011.9%20L363.6%2012.3%20L364.2%2012.4%20L364.3%2012.1%20L364.3%2011.8%20L364.5%2011.5%20L364.6%2011.3%20L364.8%2011.1%20L365.1%2010.9%20L365.4%2010.7%20L365.7%2010.5%20L366%2010.5%20L366.4%2010.4%20L366.7%2010.4%20L367.1%2010.5%20L367.5%2010.6%20L367.8%2010.8%20L368.2%2011%20L368.5%2011.2%20L368.8%2011.6%20L369%2011.9%20L369.2%2012.3%20L369.3%2012.8%20L369.4%2013.2%20L369.4%2013.7%20L369.3%2014.2%20L369.2%2014.7%20L369%2015.1%20L368.7%2015.6%20L368.4%2016%20L368%2016.3%20L367.6%2016.6%20L367.1%2016.9%20L366.6%2017.1%20L366%2017.2%20L365.4%2017.2%20L364.8%2017.2%20L364.2%2017%20L363.7%2016.8%20L363.1%2016.5%20L362.6%2016.1%20L362.2%2015.7%20L361.8%2015.2%20L361.5%2014.6%20L361.2%2014%20L361.1%2013.3%20L361%2012.6%20L361%2011.9%20L361.1%2011.3%20L361.4%2010.6%20L361.7%209.9%20L362.1%209.3%20L362.6%208.8%20L363.2%208.3%20L363.8%207.9%20L364.5%207.6%20L365.3%207.3%20L366%207.2%20L366.8%207.2%20L367.6%207.3%20L368.4%207.5%20L369.2%207.9%20L369.9%208.3%20L370.5%208.8%20L371.1%209.4%20L371.6%2010.1%20L372%2010.9%20L372.3%2011.7%20L372.5%2012.6%20L372.6%2013.5%20L372.5%2014.4%20L372.3%2015.3%20L372%2016.2%20L371.6%2017%20L371%2017.8%20L370.4%2018.5%20L369.6%2019.1%20L368.8%2019.6%20L367.9%2019.9%20L366.9%2020.2%20L365.8%2020.3%20L364.3%2020.7%20L363%2021%20L361.6%2021.3%20L360.2%2021.6%20L358.8%2021.8%20L357.5%2022.1%20L356.1%2022.3%20L354.8%2022.5%20L353.4%2022.6%20L352.1%2022.7%20L350.7%2022.8%20L349.4%2022.8%20L348%2022.8%20L346.7%2022.8%20L345.3%2022.7%20L344%2022.5%20L342.7%2022.3%20L341.3%2022.1%20L340%2021.9%20L338.6%2021.6%20L337.3%2021.3%20L335.9%2020.9%20L334.5%2020.6%20L333.2%2020.2%20L331.8%2019.8%20L330.4%2019.5%20Z%22/%3E%3C/svg%3E");
background-repeat:no-repeat; background-size:100% 100%;
}
/* UNA SOLA RAÍZ.
En ordenador cruza a lo ancho bajando en diagonal, y las hojas cuelgan de
ella por arriba y por abajo. Es lo único que cabe entero en una pantalla
apaisada: una enredadera vertical obliga a deslizar sí o sí.
La franja se dimensiona con vh, así que en cualquier portátil entra sola. */
.enredadera{
/* Dos medidas distintas, que antes eran una sola y se estorbaban:
--fila es la SEPARACION: la altura de la franja. Cuanto mas alta,
mas apartadas quedan las hojas y menos hueco sobra abajo.
--hoja-base es el TAMANO de la hoja.
Con una sola variable, estirar la franja para llenar la pantalla
agrandaba tambien las hojas y volvia a juntarlas: ese fue el callejon
de "--fila a 63vh". Separadas, la franja llena el alto sin tocarlas.
--col es el ancho REAL de columna. Ojo: 15vw coincide con el ancho de
columna solo por debajo de 1680px; a partir de ahi la rejilla deja de
crecer por el max-width y 15vw sigue subiendo, asi que a 1920 las hojas
se salian de su columna y se pisaban. */
/* Lo que descuenta no es un numero suelto: la bajada ya no mide en vh sino
en proporcion al ancho, asi que entra en la cuenta por su nombre.
166 y no 286: la cabecera ya no deja 100-140px de aire sobre el titulo
sino 22px, y lo que sobra se lo queda la franja. */
--fila:clamp(282px,calc(100vh - 166px - var(--bajada)),1100px);
--hoja-base:clamp(282px,56vh,660px);
--col:calc(var(--rejilla) / 6);
list-style:none; margin:0; padding:0;
position:relative; display:grid;
grid-template-columns:repeat(6,1fr);
grid-auto-rows:var(--fila);
}
/* El tallo va en DOS capas porque la última fila no se dibuja como las demás:
las de arriba tienen que seguir hacia la de abajo y la última remata en
espiral. Las dos van por detrás de las hojas —z-index:-1, que es justo donde
estaba el fondo al que sustituyen— y clavadas a la rejilla, así que siguen
saliendo solas por muchas hojas que se añadan. */
.enredadera::before,
.enredadera::after{
content:""; position:absolute; left:0; right:0; z-index:-1;
pointer-events:none;
background-repeat:no-repeat;
background-position:left top;
}
/* Todas las filas menos la última. El dibujo lleva DOS filas —la pasada y su
espejo— y se repite cada dos: empalma consigo mismo por las dos esquinas,
así que la enredadera serpentea sin junta por las filas que haga falta.
Antes el dibujo era de una fila y remataba en espiral, y en colectivos
—doce hojas— se veían dos ramas sueltas, la segunda empezando otra vez
desde el margen izquierdo. */
.enredadera::before{
top:0; bottom:var(--fila);
/*@franja*/background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%20840%22%20preserveAspectRatio=%22none%22%3E%3Cg%20id=%22p%22%3E%3Cpath%20fill=%22%2314170f%22%20stroke=%22%2314170f%22%20stroke-width=%22.7%22%20stroke-linejoin=%22round%22%20d=%22M11.5%20-0%20L11.5%200.5%20L11.5%201.1%20L11.4%201.8%20L11.3%202.6%20L11.2%203.6%20L11%204.7%20L10.9%205.8%20L10.7%207.1%20L10.6%208.4%20L10.4%209.8%20L10.4%2011.3%20L10.3%2012.9%20L10.3%2014.5%20L10.4%2016.2%20L10.6%2018%20L10.8%2019.8%20L11.1%2021.7%20L11.6%2023.6%20L12.1%2025.5%20L12.8%2027.5%20L13.5%2029.5%20L14.3%2031.5%20L15.1%2033.6%20L16.1%2035.8%20L17.1%2038%20L18.1%2040.4%20L19.3%2042.8%20L20.5%2045.2%20L21.7%2047.6%20L23%2050.1%20L24.4%2052.7%20L25.8%2055.2%20L27.2%2057.7%20L28.7%2060.2%20L30.2%2062.7%20L31.8%2065.2%20L33.4%2067.7%20L35%2070.1%20L36.7%2072.4%20L38.4%2074.7%20L40%2076.8%20L41.3%2078.6%20L42.6%2080.1%20L43.7%2081.6%20L44.8%2082.9%20L45.9%2084.1%20L47%2085.4%20L48.1%2086.6%20L49.3%2087.8%20L50.7%2089.1%20L52.2%2090.5%20L53.9%2092.1%20L55.9%2094%20L58.2%2096.1%20L60.8%2098.4%20L63.7%20101.2%20L67.1%20104.3%20L71%20107.9%20L75.3%20112%20L80.2%20116.6%20L85.6%20122%20L91.6%20128.6%20L98.1%20136.2%20L105.2%20144.7%20L112.7%20153.9%20L120.6%20163.6%20L128.9%20173.8%20L137.5%20184.1%20L146.4%20194.6%20L155.5%20205.1%20L164.7%20215.3%20L174.1%20225.2%20L183.6%20234.6%20L193.1%20243.3%20L202.6%20251.2%20L212.1%20258.2%20L221.6%20264%20L231%20268.6%20L240.4%20271.8%20L249.8%20273.3%20L259.1%20272.7%20L268.3%20270%20L277.3%20265.4%20L286.1%20259.4%20L294.7%20252.1%20L303.2%20243.8%20L311.7%20234.6%20L320.1%20224.9%20L328.5%20214.8%20L336.8%20204.4%20L345.2%20194.1%20L353.4%20184.1%20L361.7%20174.5%20L369.9%20165.7%20L378%20157.7%20L386.1%20150.9%20L394%20145.5%20L401.7%20141.6%20L409.1%20139.4%20L416.4%20138.9%20L423.7%20140.3%20L431.2%20143.5%20L439%20148.4%20L447%20154.9%20L455.1%20162.8%20L463.3%20171.8%20L471.5%20181.7%20L479.8%20192.3%20L488.1%20203.4%20L496.4%20214.8%20L504.7%20226.1%20L513.1%20237.3%20L521.5%20248.1%20L529.9%20258.3%20L538.4%20267.7%20L547%20276%20L555.7%20283.1%20L564.6%20288.7%20L573.7%20292.5%20L583.1%20294.3%20L592.5%20293.7%20L601.7%20291%20L610.6%20286.4%20L619.4%20280.4%20L628%20273.1%20L636.6%20264.8%20L645%20255.6%20L653.4%20245.9%20L661.8%20235.8%20L670.2%20225.4%20L678.5%20215.1%20L686.8%20205.1%20L695%20195.5%20L703.2%20186.7%20L711.4%20178.7%20L719.4%20171.9%20L727.3%20166.5%20L735%20162.6%20L742.5%20160.4%20L749.8%20159.9%20L757.4%20161.1%20L765.5%20163.9%20L774%20168.1%20L782.8%20173.5%20L791.8%20180.2%20L801%20187.8%20L810.2%20196.3%20L819.5%20205.5%20L828.7%20215.2%20L837.8%20225.4%20L846.8%20235.7%20L855.6%20246.1%20L864.1%20256.5%20L872.4%20266.6%20L880.3%20276.3%20L887.9%20285.5%20L895%20294%20L901.7%20301.7%20L907.9%20308.5%20L913.6%20314.1%20L918.5%20318.6%20L922.9%20322.6%20L926.8%20326.1%20L930.3%20329.1%20L933.3%20331.6%20L935.9%20333.8%20L938.2%20335.7%20L940.2%20337.3%20L941.9%20338.6%20L943.4%20339.8%20L944.7%20340.8%20L945.8%20341.7%20L946.8%20342.5%20L947.7%20343.3%20L948.6%20344.1%20L949.5%20345%20L950.5%20346.1%20L951.7%20347.4%20L953%20348.9%20L954.5%20350.8%20L956.1%20352.8%20L957.6%20355%20L959.1%20357.2%20L960.7%20359.4%20L962.1%20361.7%20L963.6%20364.1%20L965%20366.5%20L966.4%20368.9%20L967.7%20371.4%20L969%20373.8%20L970.3%20376.2%20L971.5%20378.6%20L972.6%20381%20L973.7%20383.3%20L974.7%20385.5%20L975.7%20387.7%20L976.5%20389.8%20L977.4%20391.8%20L978.1%20393.7%20L978.8%20395.5%20L979.3%20397.1%20L979.7%20398.6%20L980%20400.1%20L980.3%20401.6%20L980.5%20403%20L980.6%20404.4%20L980.7%20405.7%20L980.7%20407%20L980.6%20408.3%20L980.6%20409.6%20L980.5%20410.8%20L980.4%20411.9%20L980.2%20413%20L980.1%20414.1%20L979.9%20415.2%20L979.8%20416.2%20L979.7%20417.2%20L979.6%20418.2%20L979.5%20419.2%20L979.5%20420%20L988.5%20420%20L988.5%20419.5%20L988.5%20418.9%20L988.6%20418.2%20L988.7%20417.4%20L988.8%20416.4%20L989%20415.3%20L989.1%20414.2%20L989.3%20412.9%20L989.4%20411.6%20L989.6%20410.2%20L989.6%20408.7%20L989.7%20407.1%20L989.7%20405.5%20L989.6%20403.8%20L989.4%20402%20L989.2%20400.2%20L988.9%20398.3%20L988.4%20396.4%20L987.9%20394.5%20L987.2%20392.5%20L986.5%20390.5%20L985.7%20388.5%20L984.9%20386.4%20L983.9%20384.2%20L982.9%20381.9%20L981.9%20379.5%20L980.7%20377.1%20L979.6%20374.6%20L978.3%20372.1%20L977%20369.6%20L975.7%20367.1%20L974.3%20364.5%20L972.8%20362%20L971.3%20359.5%20L969.8%20357%20L968.2%20354.5%20L966.6%20352.1%20L964.9%20349.7%20L963.2%20347.4%20L961.5%20345.2%20L959.9%20343.2%20L958.5%20341.5%20L957.2%20340.1%20L956%20338.8%20L954.9%20337.6%20L953.8%20336.6%20L952.6%20335.6%20L951.5%20334.6%20L950.3%20333.7%20L948.9%20332.7%20L947.5%20331.5%20L945.8%20330.2%20L943.9%20328.7%20L941.7%20326.9%20L939.1%20324.8%20L936.2%20322.3%20L932.8%20319.3%20L929%20315.9%20L924.6%20312%20L919.8%20307.5%20L914.4%20302.2%20L908.4%20295.7%20L901.9%20288.2%20L894.8%20279.8%20L887.3%20270.6%20L879.4%20260.9%20L871.1%20250.8%20L862.5%20240.4%20L853.6%20229.9%20L844.5%20219.4%20L835.3%20209.1%20L825.9%20199.2%20L816.4%20189.8%20L806.9%20181.1%20L797.4%20173.1%20L787.9%20166.1%20L778.4%20160.2%20L769%20155.6%20L759.6%20152.4%20L750.2%20150.9%20L740.9%20151.5%20L731.7%20154.2%20L722.7%20158.8%20L713.9%20164.8%20L705.3%20172.1%20L696.8%20180.4%20L688.3%20189.6%20L679.9%20199.3%20L671.5%20209.4%20L663.2%20219.8%20L654.8%20230.1%20L646.6%20240.1%20L638.3%20249.7%20L630.1%20258.5%20L622%20266.5%20L613.9%20273.3%20L606%20278.7%20L598.3%20282.6%20L590.9%20284.8%20L583.6%20285.3%20L576.3%20283.9%20L568.8%20280.7%20L561%20275.8%20L553%20269.3%20L544.9%20261.4%20L536.7%20252.4%20L528.5%20242.5%20L520.2%20231.9%20L511.9%20220.8%20L503.6%20209.4%20L495.3%20198.1%20L486.9%20186.9%20L478.5%20176.1%20L470.1%20165.9%20L461.6%20156.5%20L453%20148.2%20L444.3%20141.1%20L435.4%20135.5%20L426.3%20131.7%20L416.9%20129.9%20L407.5%20130.5%20L398.3%20133.2%20L389.4%20137.8%20L380.6%20143.8%20L372%20151.1%20L363.4%20159.4%20L355%20168.6%20L346.6%20178.3%20L338.2%20188.4%20L329.8%20198.8%20L321.5%20209.1%20L313.2%20219.1%20L305%20228.7%20L296.8%20237.5%20L288.6%20245.5%20L280.6%20252.3%20L272.7%20257.7%20L265%20261.6%20L257.5%20263.8%20L250.2%20264.3%20L242.6%20263.1%20L234.5%20260.3%20L226%20256.2%20L217.2%20250.7%20L208.2%20244.1%20L199%20236.5%20L189.8%20228%20L180.5%20218.9%20L171.3%20209.2%20L162.2%20199.1%20L153.2%20188.8%20L144.4%20178.4%20L135.9%20168%20L127.6%20157.9%20L119.7%20148.2%20L112.1%20139%20L105%20130.4%20L98.3%20122.6%20L92.1%20115.8%20L86.5%20110.2%20L81.5%20105.5%20L77.1%20101.4%20L73.3%2097.8%20L69.8%2094.6%20L66.9%2091.8%20L64.3%2089.4%20L62%2087.4%20L60.1%2085.6%20L58.4%2084%20L56.9%2082.6%20L55.7%2081.4%20L54.6%2080.3%20L53.6%2079.2%20L52.6%2078.2%20L51.7%2077.1%20L50.7%2075.9%20L49.7%2074.6%20L48.5%2073.1%20L47.1%2071.3%20L45.6%2069.3%20L44%2067.1%20L42.4%2064.9%20L40.9%2062.7%20L39.4%2060.3%20L37.9%2058%20L36.4%2055.6%20L35%2053.2%20L33.6%2050.8%20L32.3%2048.3%20L31%2045.9%20L29.7%2043.5%20L28.5%2041.2%20L27.4%2038.9%20L26.3%2036.6%20L25.3%2034.4%20L24.3%2032.2%20L23.4%2030.1%20L22.6%2028.1%20L21.9%2026.2%20L21.2%2024.5%20L20.7%2022.9%20L20.3%2021.4%20L20%2019.9%20L19.7%2018.4%20L19.5%2017%20L19.4%2015.6%20L19.3%2014.3%20L19.3%2013%20L19.4%2011.7%20L19.4%2010.4%20L19.5%209.2%20L19.6%208.1%20L19.8%207%20L19.9%205.9%20L20.1%204.8%20L20.2%203.8%20L20.3%202.8%20L20.4%201.8%20L20.5%200.8%20L20.5%200%20Z%22/%3E%3Cpath%20fill=%22%23ff00aa%22%20stroke=%22%23ff00aa%22%20stroke-width=%22.6%22%20stroke-linejoin=%22round%22%20d=%22M13.3%20-0%20L13.2%200.6%20L13.2%201.2%20L13.1%202%20L13%202.8%20L12.9%203.8%20L12.7%204.8%20L12.5%206%20L12.4%207.2%20L12.2%208.5%20L12.1%209.9%20L12%2011.3%20L11.9%2012.8%20L11.9%2014.4%20L11.9%2016.1%20L12%2017.8%20L12.2%2019.5%20L12.5%2021.3%20L12.9%2023.2%20L13.4%2025.1%20L14%2027%20L14.6%2028.9%20L15.4%2031%20L16.2%2033.1%20L17.1%2035.3%20L18%2037.6%20L19%2039.9%20L20%2042.3%20L21.2%2044.7%20L22.3%2047.2%20L23.5%2049.8%20L24.8%2052.3%20L26.1%2054.9%20L27.5%2057.4%20L28.9%2060%20L30.3%2062.6%20L31.8%2065.1%20L33.3%2067.6%20L34.9%2070%20L36.5%2072.5%20L38.1%2074.8%20L39.6%2076.9%20L40.9%2078.8%20L42.1%2080.4%20L43.2%2081.9%20L44.2%2083.3%20L45.3%2084.5%20L46.3%2085.8%20L47.5%2087.1%20L48.7%2088.4%20L50%2089.7%20L51.4%2091.2%20L53.1%2092.9%20L55%2094.8%20L57.2%2096.9%20L59.7%2099.4%20L62.6%20102.3%20L65.9%20105.5%20L69.6%20109.3%20L73.9%20113.5%20L78.6%20118.1%20L83.8%20123.6%20L89.6%20130.3%20L96.1%20137.9%20L103.1%20146.4%20L110.6%20155.6%20L118.7%20165.3%20L127.2%20175.3%20L136.2%20185.4%20L145.6%20195.5%20L155.3%20205.5%20L165.2%20215.1%20L175.4%20224.2%20L185.6%20232.8%20L195.8%20240.5%20L206%20247.4%20L215.8%20253.2%20L225.4%20257.8%20L234.5%20261.1%20L242.9%20263%20L250.6%20263.4%20L257.5%20262.2%20L264.4%20259.3%20L271.3%20255%20L278.5%20249.2%20L285.9%20242.2%20L293.5%20234.2%20L301.3%20225.3%20L309.4%20215.9%20L317.7%20206.1%20L326.4%20196.1%20L335.3%20186.3%20L344.4%20176.8%20L353.8%20167.9%20L363.3%20159.7%20L372.8%20152.5%20L382.2%20146.5%20L391.4%20142%20L400.2%20139%20L408.4%20137.9%20L415.9%20138.7%20L422.9%20141.3%20L429.6%20145.6%20L436.2%20151.6%20L442.8%20159%20L449.4%20167.7%20L456.1%20177.5%20L463.1%20188.1%20L470.3%20199.3%20L477.8%20210.9%20L485.7%20222.5%20L494.1%20234%20L502.9%20245.2%20L512.2%20255.8%20L521.8%20265.7%20L531.7%20274.6%20L541.8%20282.3%20L552.1%20288.7%20L562.5%20293.4%20L573%20296.1%20L583.3%20296.5%20L593%20294.3%20L601.8%20290%20L609.8%20284%20L617.2%20276.7%20L624.3%20268.3%20L631.2%20259%20L638.1%20249%20L645.2%20238.5%20L652.4%20227.7%20L659.9%20216.9%20L667.8%20206.3%20L676%20196%20L684.6%20186.3%20L693.5%20177.4%20L702.7%20169.5%20L712%20162.7%20L721.5%20157.3%20L731.1%20153.6%20L740.6%20151.8%20L749.9%20152.2%20L758.7%20154.7%20L767.2%20158.8%20L775.6%20164.4%20L784%20171.2%20L792.2%20179.1%20L800.5%20187.9%20L808.9%20197.3%20L817.3%20207.3%20L825.8%20217.7%20L834.5%20228.2%20L843.2%20238.7%20L852%20249.2%20L860.7%20259.4%20L869.3%20269.2%20L877.8%20278.6%20L885.9%20287.4%20L893.6%20295.5%20L900.8%20302.8%20L907.5%20309.1%20L913.5%20314.4%20L918.8%20318.7%20L923.4%20322.4%20L927.5%20325.6%20L931.1%20328.4%20L934.2%20330.8%20L936.9%20332.9%20L939.3%20334.6%20L941.3%20336.1%20L943.1%20337.4%20L944.6%20338.5%20L945.9%20339.4%20L947.1%20340.3%20L948.2%20341.1%20L949.1%20341.8%20L950.1%20342.7%20L951.1%20343.6%20L952.2%20344.7%20L953.4%20346%20L954.7%20347.6%20L956.3%20349.4%20L958%20351.5%20L959.6%20353.6%20L961.2%20355.8%20L962.8%20358.1%20L964.3%20360.4%20L965.8%20362.8%20L967.3%20365.2%20L968.7%20367.7%20L970%20370.1%20L971.3%20372.6%20L972.6%20375%20L973.8%20377.5%20L974.9%20379.8%20L976%20382.2%20L977%20384.5%20L977.9%20386.7%20L978.8%20388.9%20L979.6%20390.9%20L980.3%20392.9%20L980.9%20394.7%20L981.5%20396.4%20L981.9%20398%20L982.2%20399.6%20L982.4%20401.2%20L982.6%20402.7%20L982.7%20404.2%20L982.7%20405.6%20L982.7%20407%20L982.6%20408.3%20L982.5%20409.6%20L982.4%20410.9%20L982.3%20412.1%20L982.1%20413.2%20L981.9%20414.3%20L981.8%20415.4%20L981.6%20416.4%20L981.5%20417.3%20L981.3%20418.3%20L981.3%20419.2%20L981.3%20419.9%20L986.7%20420.1%20L986.8%20419.5%20L986.8%20418.8%20L986.9%20418.1%20L987%20417.2%20L987.2%20416.2%20L987.4%20415.2%20L987.5%20414%20L987.7%20412.8%20L987.9%20411.5%20L988%20410.1%20L988.1%20408.7%20L988.2%20407.2%20L988.2%20405.6%20L988.2%20403.9%20L988.1%20402.2%20L987.9%20400.5%20L987.6%20398.7%20L987.2%20396.8%20L986.7%20394.9%20L986.1%20392.9%20L985.5%20391%20L984.7%20389%20L983.9%20386.8%20L983%20384.6%20L982%20382.3%20L981%20380%20L979.9%20377.5%20L978.7%20375.1%20L977.5%20372.6%20L976.2%20370%20L974.9%20367.5%20L973.5%20365%20L972%20362.4%20L970.5%20359.9%20L968.9%20357.4%20L967.3%20355%20L965.7%20352.6%20L964%20350.3%20L962.3%20348.1%20L960.6%20345.9%20L958.9%20344%20L957.5%20342.3%20L956.2%20340.9%20L955%20339.7%20L953.8%20338.6%20L952.7%20337.6%20L951.6%20336.7%20L950.4%20335.8%20L949.2%20334.9%20L947.8%20334%20L946.3%20332.9%20L944.5%20331.6%20L942.5%20330.2%20L940.2%20328.5%20L937.5%20326.4%20L934.4%20324%20L930.9%20321.3%20L926.8%20318.1%20L922.2%20314.4%20L917%20310.2%20L911.2%20305.1%20L904.7%20298.9%20L897.5%20291.7%20L889.9%20283.6%20L881.8%20274.9%20L873.5%20265.6%20L864.9%20255.8%20L856.2%20245.6%20L847.4%20235.2%20L838.7%20224.7%20L830.1%20214.2%20L821.5%20203.8%20L813%20193.8%20L804.6%20184.2%20L796.1%20175.2%20L787.6%20167.1%20L778.9%20160%20L770%20154.1%20L760.6%20149.5%20L750.7%20146.8%20L740.2%20146.3%20L729.6%20148.3%20L719.2%20152.4%20L709%20158.1%20L699.2%20165.2%20L689.7%20173.4%20L680.6%20182.6%20L671.8%20192.5%20L663.4%20202.9%20L655.4%20213.7%20L647.8%20224.6%20L640.6%20235.4%20L633.6%20245.9%20L626.7%20255.8%20L620%20264.9%20L613.2%20273%20L606.2%20279.9%20L598.9%20285.3%20L591.2%20289.1%20L582.8%20291%20L573.8%20290.7%20L564.4%20288.2%20L554.7%20283.8%20L544.9%20277.8%20L535.2%20270.4%20L525.6%20261.7%20L516.2%20252.1%20L507.2%20241.7%20L498.5%20230.7%20L490.2%20219.3%20L482.4%20207.8%20L474.9%20196.3%20L467.7%20185.1%20L460.7%20174.5%20L453.9%20164.5%20L447%20155.5%20L440.1%20147.7%20L432.9%20141.3%20L425.4%20136.4%20L417.2%20133.3%20L408.3%20132.4%20L399%20133.7%20L389.3%20136.9%20L379.5%20141.7%20L369.6%20148%20L359.8%20155.4%20L350.1%20163.8%20L340.6%20172.9%20L331.3%20182.6%20L322.3%20192.5%20L313.6%20202.5%20L305.2%20212.3%20L297.1%20221.7%20L289.4%20230.5%20L282%20238.4%20L274.9%20245.1%20L268.1%20250.5%20L261.8%20254.5%20L256%20256.9%20L250.3%20257.9%20L243.7%20257.6%20L236%20255.9%20L227.5%20252.8%20L218.4%20248.3%20L208.9%20242.7%20L199.1%20236.1%20L189%20228.5%20L179%20220.1%20L169%20211.1%20L159.2%20201.6%20L149.6%20191.7%20L140.3%20181.7%20L131.4%20171.6%20L122.9%20161.7%20L114.8%20152.1%20L107.3%20142.9%20L100.3%20134.4%20L93.8%20126.7%20L87.9%20119.9%20L82.5%20114.3%20L77.8%20109.6%20L73.5%20105.3%20L69.8%20101.6%20L66.5%2098.4%20L63.6%2095.5%20L61.1%2093%20L58.9%2090.9%20L57%2089%20L55.3%2087.3%20L53.9%2085.9%20L52.7%2084.6%20L51.5%2083.4%20L50.5%2082.2%20L49.5%2081.1%20L48.6%2079.9%20L47.6%2078.6%20L46.5%2077.2%20L45.4%2075.6%20L44.1%2073.7%20L42.6%2071.7%20L41.1%2069.4%20L39.5%2067.1%20L38%2064.7%20L36.5%2062.3%20L35.1%2059.8%20L33.7%2057.3%20L32.3%2054.8%20L31%2052.3%20L29.7%2049.8%20L28.5%2047.3%20L27.3%2044.9%20L26.1%2042.4%20L25.1%2040.1%20L24%2037.7%20L23.1%2035.4%20L22.2%2033.2%20L21.3%2031.1%20L20.5%2029.1%20L19.8%2027.1%20L19.2%2025.3%20L18.7%2023.6%20L18.3%2021.9%20L17.9%2020.3%20L17.7%2018.8%20L17.5%2017.3%20L17.4%2015.8%20L17.4%2014.4%20L17.4%2013%20L17.5%2011.6%20L17.5%2010.3%20L17.7%209.1%20L17.8%207.9%20L18%206.8%20L18.1%205.7%20L18.3%204.6%20L18.4%203.6%20L18.6%202.6%20L18.7%201.7%20L18.7%200.8%20L18.7%200%20Z%22/%3E%3C/g%3E%3Cuse%20href=%22%23p%22%20transform=%22translate(1000,420)%20scale(-1,1)%22/%3E%3C/svg%3E");
background-repeat:repeat-y;
background-size:100% calc(var(--fila) * 2);
}
/* La última fila: la misma pasada, pero afilada y cerrada en espiral. */
.enredadera::after{
bottom:0; height:var(--fila);
/*@cola*/background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%20420%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%2314170f%22%20stroke=%22%2314170f%22%20stroke-width=%22.7%22%20stroke-linejoin=%22round%22%20d=%22M11.5%20-0%20L11.5%200.5%20L11.5%201.1%20L11.4%201.8%20L11.3%202.6%20L11.2%203.6%20L11%204.7%20L10.9%205.8%20L10.7%207.1%20L10.6%208.4%20L10.4%209.8%20L10.4%2011.3%20L10.3%2012.9%20L10.3%2014.5%20L10.4%2016.2%20L10.6%2018%20L10.8%2019.8%20L11.1%2021.7%20L11.6%2023.6%20L12.1%2025.5%20L12.8%2027.5%20L13.5%2029.5%20L14.3%2031.5%20L15.1%2033.6%20L16.1%2035.8%20L17.1%2038%20L18.1%2040.4%20L19.3%2042.8%20L20.5%2045.2%20L21.7%2047.6%20L23%2050.1%20L24.4%2052.7%20L25.8%2055.2%20L27.2%2057.7%20L28.7%2060.2%20L30.2%2062.7%20L31.8%2065.2%20L33.4%2067.7%20L35%2070.1%20L36.7%2072.4%20L38.4%2074.7%20L40%2076.8%20L41.3%2078.6%20L42.6%2080.1%20L43.7%2081.6%20L44.8%2082.9%20L45.9%2084.1%20L47%2085.4%20L48.1%2086.6%20L49.3%2087.8%20L50.7%2089.1%20L52.2%2090.5%20L53.9%2092.1%20L55.9%2094%20L58.2%2096.1%20L60.8%2098.4%20L63.7%20101.2%20L67.1%20104.3%20L71%20107.9%20L75.3%20112%20L80.2%20116.6%20L85.6%20122%20L91.6%20128.6%20L98.1%20136.2%20L105.2%20144.7%20L112.7%20153.9%20L120.6%20163.6%20L128.9%20173.8%20L137.5%20184.1%20L146.4%20194.6%20L155.5%20205.1%20L164.7%20215.3%20L174.1%20225.2%20L183.6%20234.6%20L193.1%20243.3%20L202.6%20251.2%20L212.1%20258.2%20L221.6%20264%20L231%20268.6%20L240.4%20271.8%20L249.8%20273.3%20L259.1%20272.7%20L268.3%20270%20L277.3%20265.4%20L286.1%20259.4%20L294.7%20252.1%20L303.2%20243.8%20L311.7%20234.6%20L320.1%20224.9%20L328.5%20214.8%20L336.8%20204.4%20L345.2%20194.1%20L353.4%20184.1%20L361.7%20174.5%20L369.9%20165.7%20L378%20157.7%20L386.1%20150.9%20L394%20145.5%20L401.7%20141.6%20L409.1%20139.4%20L416.4%20138.9%20L423.7%20140.3%20L431.2%20143.5%20L439%20148.4%20L447%20154.9%20L455.1%20162.8%20L463.3%20171.8%20L471.5%20181.7%20L479.8%20192.3%20L488.1%20203.4%20L496.4%20214.8%20L504.7%20226.1%20L513.1%20237.3%20L521.5%20248.1%20L529.9%20258.3%20L538.4%20267.7%20L547%20276%20L555.7%20283.1%20L564.6%20288.7%20L573.7%20292.5%20L583.1%20294.3%20L592.5%20293.7%20L601.7%20291%20L610.6%20286.4%20L619.4%20280.4%20L628%20273.1%20L636.6%20264.8%20L645%20255.6%20L653.4%20245.9%20L661.8%20235.8%20L670.2%20225.4%20L678.5%20215.1%20L686.8%20205.1%20L695%20195.5%20L703.2%20186.7%20L711.4%20178.7%20L719.4%20171.9%20L727.3%20166.5%20L735%20162.6%20L742.5%20160.4%20L749.8%20159.9%20L757.4%20161.2%20L765.4%20164%20L773.9%20168.2%20L782.6%20173.8%20L791.5%20180.6%20L800.6%20188.4%20L809.8%20197%20L818.9%20206.3%20L828.1%20216.2%20L837.1%20226.5%20L846.1%20236.9%20L854.8%20247.4%20L863.4%20257.8%20L871.7%20267.9%20L879.6%20277.6%20L887.3%20286.7%20L894.6%20295.1%20L901.4%20302.6%20L907.8%20309%20L913.8%20314.3%20L919.3%20318.3%20L924.2%20321.7%20L928.7%20324.5%20L932.9%20326.7%20L936.7%20328.4%20L940.2%20329.7%20L943.3%20330.6%20L946.3%20331.2%20L948.9%20331.5%20L951.4%20331.5%20L953.6%20331.4%20L955.5%20331.2%20L957.2%20331%20L958.7%20330.8%20L960%20330.7%20L961.1%20330.7%20L962.2%20330.8%20L963.3%20331.1%20L964.5%20331.7%20L966%20332.6%20L967.6%20333.9%20L969.3%20335.2%20L970.9%20336.7%20L972.5%20338.2%20L974%20339.8%20L975.4%20341.5%20L976.8%20343.2%20L978.1%20344.9%20L979.4%20346.7%20L980.6%20348.5%20L981.6%20350.3%20L982.7%20352.2%20L983.6%20354%20L984.4%20355.8%20L985.2%20357.6%20L985.8%20359.4%20L986.4%20361.2%20L986.8%20362.9%20L987.2%20364.5%20L987.4%20366.1%20L987.5%20367.6%20L987.6%20369.1%20L987.5%20370.7%20L987.3%20372.4%20L987%20374%20L986.6%20375.7%20L986.1%20377.3%20L985.6%20379%20L984.9%20380.7%20L984.2%20382.3%20L983.4%20383.9%20L982.5%20385.5%20L981.6%20387.1%20L980.6%20388.6%20L979.5%20390%20L978.5%20391.4%20L977.3%20392.8%20L976.2%20394.1%20L975%20395.3%20L973.8%20396.3%20L972.5%20397.4%20L971.1%20398.3%20L969.6%20399.3%20L968%20400.2%20L966.4%20401.1%20L964.6%20401.9%20L962.8%20402.7%20L960.9%20403.4%20L959%20404.1%20L957.1%20404.7%20L955.1%20405.3%20L953.1%20405.8%20L951.1%20406.3%20L949.1%20406.7%20L947.2%20407.1%20L945.2%20407.4%20L943.3%20407.6%20L941.5%20407.8%20L939.7%20407.9%20L938%20407.9%20L936.4%20407.8%20L934.7%20407.6%20L932.9%20407.3%20L931.1%20406.9%20L929.2%20406.4%20L927.4%20405.8%20L925.5%20405.1%20L923.6%20404.4%20L921.8%20403.6%20L920%20402.8%20L918.2%20402%20L916.5%20401.2%20L914.8%20400.4%20L913.2%20399.6%20L911.7%20398.8%20L910.3%20398.1%20L908.9%20397.5%20L907.7%20396.9%20L906.6%20396.4%20L905.7%20396%20L904.3%20399.6%20L905.2%20399.9%20L906.2%20400.3%20L907.3%20400.9%20L908.6%20401.5%20L910%20402.2%20L911.5%20403%20L913.1%20403.8%20L914.8%20404.6%20L916.6%20405.4%20L918.4%20406.3%20L920.3%20407.1%20L922.2%20407.9%20L924.2%20408.7%20L926.2%20409.4%20L928.1%20410%20L930.1%20410.6%20L932.1%20411%20L934.1%20411.4%20L936.1%20411.6%20L938%20411.7%20L939.9%20411.7%20L941.8%20411.6%20L943.7%20411.4%20L945.8%20411.1%20L947.8%20410.8%20L949.9%20410.5%20L951.9%20410%20L954%20409.5%20L956.1%20409%20L958.2%20408.4%20L960.2%20407.7%20L962.3%20407%20L964.2%20406.2%20L966.2%20405.4%20L968%20404.5%20L969.9%20403.5%20L971.6%20402.5%20L973.2%20401.5%20L974.8%20400.4%20L976.2%20399.3%20L977.6%20398%20L978.9%20396.8%20L980.3%20395.5%20L981.5%20394%20L982.8%20392.6%20L984%20391%20L985.1%20389.4%20L986.2%20387.8%20L987.2%20386%20L988.2%20384.3%20L989.1%20382.5%20L989.9%20380.7%20L990.6%20378.8%20L991.2%20377%20L991.7%20375.1%20L992.2%20373.2%20L992.5%20371.3%20L992.6%20369.4%20L992.7%20367.4%20L992.6%20365.5%20L992.4%20363.6%20L992.1%20361.7%20L991.6%20359.7%20L991.1%20357.7%20L990.4%20355.7%20L989.7%20353.7%20L988.8%20351.6%20L987.9%20349.6%20L986.9%20347.5%20L985.7%20345.4%20L984.5%20343.4%20L983.2%20341.4%20L981.9%20339.4%20L980.4%20337.5%20L978.9%20335.6%20L977.3%20333.7%20L975.6%20331.9%20L973.8%20330.2%20L972%20328.6%20L970%20327%20L968%20325.6%20L965.9%20324.6%20L963.8%20323.9%20L961.8%20323.5%20L959.9%20323.4%20L958.1%20323.5%20L956.4%20323.7%20L954.7%20323.8%20L953.1%20324%20L951.4%20324%20L949.6%20323.9%20L947.6%20323.6%20L945.3%20323.1%20L942.8%20322.2%20L939.9%20321.1%20L936.7%20319.4%20L933%20317.3%20L929%20314.6%20L924.5%20311.3%20L919.5%20307.3%20L914%20302.5%20L907.9%20296.4%20L901.3%20289.1%20L894.1%20280.9%20L886.6%20271.9%20L878.6%20262.2%20L870.3%20252.1%20L861.8%20241.7%20L853%20231.1%20L843.9%20220.6%20L834.8%20210.2%20L825.5%20200.1%20L816.1%20190.6%20L806.6%20181.7%20L797.2%20173.6%20L787.8%20166.4%20L778.3%20160.4%20L769%20155.7%20L759.6%20152.4%20L750.2%20150.9%20L740.9%20151.5%20L731.7%20154.2%20L722.7%20158.8%20L713.9%20164.8%20L705.3%20172.1%20L696.8%20180.4%20L688.3%20189.6%20L679.9%20199.3%20L671.5%20209.4%20L663.2%20219.8%20L654.8%20230.1%20L646.6%20240.1%20L638.3%20249.7%20L630.1%20258.5%20L622%20266.5%20L613.9%20273.3%20L606%20278.7%20L598.3%20282.6%20L590.9%20284.8%20L583.6%20285.3%20L576.3%20283.9%20L568.8%20280.7%20L561%20275.8%20L553%20269.3%20L544.9%20261.4%20L536.7%20252.4%20L528.5%20242.5%20L520.2%20231.9%20L511.9%20220.8%20L503.6%20209.4%20L495.3%20198.1%20L486.9%20186.9%20L478.5%20176.1%20L470.1%20165.9%20L461.6%20156.5%20L453%20148.2%20L444.3%20141.1%20L435.4%20135.5%20L426.3%20131.7%20L416.9%20129.9%20L407.5%20130.5%20L398.3%20133.2%20L389.4%20137.8%20L380.6%20143.8%20L372%20151.1%20L363.4%20159.4%20L355%20168.6%20L346.6%20178.3%20L338.2%20188.4%20L329.8%20198.8%20L321.5%20209.1%20L313.2%20219.1%20L305%20228.7%20L296.8%20237.5%20L288.6%20245.5%20L280.6%20252.3%20L272.7%20257.7%20L265%20261.6%20L257.5%20263.8%20L250.2%20264.3%20L242.6%20263.1%20L234.5%20260.3%20L226%20256.2%20L217.2%20250.7%20L208.2%20244.1%20L199%20236.5%20L189.8%20228%20L180.5%20218.9%20L171.3%20209.2%20L162.2%20199.1%20L153.2%20188.8%20L144.4%20178.4%20L135.9%20168%20L127.6%20157.9%20L119.7%20148.2%20L112.1%20139%20L105%20130.4%20L98.3%20122.6%20L92.1%20115.8%20L86.5%20110.2%20L81.5%20105.5%20L77.1%20101.4%20L73.3%2097.8%20L69.8%2094.6%20L66.9%2091.8%20L64.3%2089.4%20L62%2087.4%20L60.1%2085.6%20L58.4%2084%20L56.9%2082.6%20L55.7%2081.4%20L54.6%2080.3%20L53.6%2079.2%20L52.6%2078.2%20L51.7%2077.1%20L50.7%2075.9%20L49.7%2074.6%20L48.5%2073.1%20L47.1%2071.3%20L45.6%2069.3%20L44%2067.1%20L42.4%2064.9%20L40.9%2062.7%20L39.4%2060.3%20L37.9%2058%20L36.4%2055.6%20L35%2053.2%20L33.6%2050.8%20L32.3%2048.3%20L31%2045.9%20L29.7%2043.5%20L28.5%2041.2%20L27.4%2038.9%20L26.3%2036.6%20L25.3%2034.4%20L24.3%2032.2%20L23.4%2030.1%20L22.6%2028.1%20L21.9%2026.2%20L21.2%2024.5%20L20.7%2022.9%20L20.3%2021.4%20L20%2019.9%20L19.7%2018.4%20L19.5%2017%20L19.4%2015.6%20L19.3%2014.3%20L19.3%2013%20L19.4%2011.7%20L19.4%2010.4%20L19.5%209.2%20L19.6%208.1%20L19.8%207%20L19.9%205.9%20L20.1%204.8%20L20.2%203.8%20L20.3%202.8%20L20.4%201.8%20L20.5%200.8%20L20.5%200%20Z%22/%3E%3Cpath%20fill=%22%23ff00aa%22%20stroke=%22%23ff00aa%22%20stroke-width=%22.6%22%20stroke-linejoin=%22round%22%20d=%22M13.3%20-0%20L13.2%200.6%20L13.2%201.2%20L13.1%202%20L13%202.8%20L12.9%203.8%20L12.7%204.8%20L12.5%206%20L12.4%207.2%20L12.2%208.5%20L12.1%209.9%20L12%2011.3%20L11.9%2012.8%20L11.9%2014.4%20L11.9%2016.1%20L12.1%2017.8%20L12.3%2019.5%20L12.5%2021.3%20L12.9%2023.2%20L13.4%2025.1%20L14%2027%20L14.7%2028.9%20L15.4%2031%20L16.2%2033.1%20L17.1%2035.3%20L18%2037.5%20L19%2039.9%20L20.1%2042.3%20L21.2%2044.7%20L22.4%2047.2%20L23.6%2049.7%20L24.9%2052.3%20L26.2%2054.8%20L27.6%2057.4%20L29%2060%20L30.4%2062.5%20L31.9%2065%20L33.4%2067.5%20L35%2070%20L36.6%2072.4%20L38.2%2074.7%20L39.7%2076.8%20L41%2078.7%20L42.2%2080.3%20L43.3%2081.8%20L44.4%2083.2%20L45.4%2084.4%20L46.5%2085.7%20L47.6%2086.9%20L48.8%2088.2%20L50.1%2089.6%20L51.6%2091.1%20L53.2%2092.8%20L55.1%2094.6%20L57.3%2096.8%20L59.9%2099.3%20L62.7%20102.1%20L66%20105.4%20L69.8%20109.1%20L74%20113.3%20L78.7%20118%20L83.9%20123.5%20L89.7%20130.2%20L96.1%20137.8%20L103.1%20146.4%20L110.6%20155.6%20L118.6%20165.3%20L127%20175.4%20L135.9%20185.6%20L145.1%20195.9%20L154.7%20205.9%20L164.5%20215.7%20L174.6%20225%20L184.7%20233.7%20L194.9%20241.6%20L205%20248.6%20L214.9%20254.6%20L224.5%20259.3%20L233.8%20262.8%20L242.5%20264.8%20L250.5%20265.2%20L257.8%20263.9%20L265%20260.9%20L272.2%20256.3%20L279.4%20250.4%20L286.8%20243.1%20L294.2%20234.8%20L301.9%20225.7%20L309.7%20216%20L317.7%20205.9%20L325.9%20195.6%20L334.4%20185.5%20L343.2%20175.6%20L352.1%20166.3%20L361.3%20157.6%20L370.6%20150%20L380%20143.5%20L389.4%20138.4%20L398.7%20134.9%20L407.7%20133.4%20L416.3%20133.9%20L424.4%20136.6%20L432%20141.2%20L439.2%20147.5%20L446.2%20155.2%20L452.9%20164.3%20L459.6%20174.4%20L466.3%20185.4%20L473.1%20197%20L480.1%20209%20L487.3%20221.1%20L494.9%20233.2%20L502.8%20245%20L511.2%20256.4%20L520%20267%20L529.2%20276.7%20L538.9%20285.3%20L549.1%20292.5%20L559.8%20298.2%20L571.1%20301.9%20L582.8%20303.1%20L594.1%20301.2%20L604.4%20296.8%20L613.6%20290.6%20L621.9%20282.9%20L629.5%20274.1%20L636.7%20264.3%20L643.6%20253.8%20L650.4%20242.7%20L657.1%20231.4%20L663.9%20219.9%20L670.9%20208.6%20L678.2%20197.5%20L685.8%20187%20L693.8%20177.3%20L702.1%20168.5%20L710.9%20160.8%20L720.1%20154.4%20L729.8%20149.7%20L740%20147%20L750.3%20146.8%20L760.3%20148.9%20L769.9%20153%20L779.1%20158.6%20L788%20165.6%20L796.6%20173.8%20L805.1%20182.9%20L813.3%20192.9%20L821.4%20203.6%20L829.3%20214.6%20L837.2%20226%20L845.1%20237.4%20L852.9%20248.7%20L860.7%20259.8%20L868.5%20270.4%20L876.1%20280.4%20L883.7%20289.8%20L891%20298.3%20L898.1%20305.8%20L904.9%20312.3%20L911.2%20317.5%20L917%20321.5%20L922.2%20324.8%20L927.1%20327.5%20L931.5%20329.7%20L935.5%20331.3%20L939.3%20332.5%20L942.8%20333.3%20L946%20333.8%20L948.9%20334%20L951.5%20333.9%20L953.8%20333.7%20L955.9%20333.4%20L957.6%20333%20L959%20332.7%20L960.2%20332.6%20L961.2%20332.5%20L962%20332.5%20L962.8%20332.7%20L963.8%20333.1%20L965.2%20333.8%20L966.9%20335%20L968.6%20336.2%20L970.3%20337.5%20L971.9%20339%20L973.5%20340.5%20L975%20342%20L976.4%20343.6%20L977.8%20345.3%20L979.2%20347%20L980.4%20348.7%20L981.6%20350.5%20L982.7%20352.3%20L983.7%20354.1%20L984.6%20355.9%20L985.4%20357.6%20L986.2%20359.4%20L986.8%20361.1%20L987.3%20362.8%20L987.7%20364.5%20L988%20366.1%20L988.2%20367.6%20L988.3%20369.2%20L988.3%20370.9%20L988.1%20372.6%20L987.9%20374.3%20L987.5%20376%20L987.1%20377.7%20L986.5%20379.4%20L985.9%20381.2%20L985.2%20382.9%20L984.4%20384.5%20L983.6%20386.2%20L982.6%20387.8%20L981.6%20389.4%20L980.6%20390.9%20L979.5%20392.4%20L978.4%20393.7%20L977.2%20395.1%20L976%20396.3%20L974.7%20397.5%20L973.4%20398.6%20L972%20399.6%20L970.4%20400.6%20L968.8%20401.6%20L967.1%20402.5%20L965.3%20403.4%20L963.4%20404.2%20L961.5%20404.9%20L959.5%20405.7%20L957.5%20406.3%20L955.5%20406.9%20L953.5%20407.4%20L951.5%20407.9%20L949.5%20408.3%20L947.4%20408.7%20L945.5%20408.9%20L943.5%20409.1%20L941.6%20409.3%20L939.8%20409.4%20L938%20409.4%20L936.3%20409.3%20L934.5%20409.1%20L932.6%20408.7%20L930.8%20408.2%20L928.9%20407.7%20L927%20407%20L925.1%20406.3%20L923.2%20405.5%20L921.3%20404.7%20L919.5%20403.9%20L917.7%20403%20L916%20402.1%20L914.4%20401.3%20L912.8%20400.4%20L911.3%20399.7%20L909.9%20398.9%20L908.6%20398.3%20L907.4%20397.7%20L906.3%20397.2%20L905.4%20396.8%20L904.6%20398.8%20L905.4%20399.2%20L906.5%20399.6%20L907.6%20400.2%20L908.9%20400.9%20L910.3%20401.6%20L911.8%20402.4%20L913.4%20403.2%20L915%20404.1%20L916.8%20405%20L918.6%20405.8%20L920.4%20406.7%20L922.3%20407.5%20L924.3%20408.3%20L926.2%20409.1%20L928.2%20409.8%20L930.2%20410.4%20L932.2%20410.8%20L934.1%20411.2%20L936.1%20411.5%20L938%20411.6%20L939.8%20411.6%20L941.8%20411.5%20L943.7%20411.3%20L945.7%20411.1%20L947.8%20410.8%20L949.9%20410.5%20L951.9%20410%20L954%20409.6%20L956.1%20409%20L958.2%20408.4%20L960.3%20407.7%20L962.3%20407%20L964.3%20406.2%20L966.2%20405.4%20L968.1%20404.5%20L969.9%20403.5%20L971.6%20402.5%20L973.2%20401.4%20L974.8%20400.3%20L976.2%20399.2%20L977.5%20398%20L978.9%20396.7%20L980.1%20395.3%20L981.4%20393.9%20L982.6%20392.4%20L983.7%20390.8%20L984.8%20389.2%20L985.8%20387.5%20L986.8%20385.8%20L987.7%20384%20L988.5%20382.2%20L989.2%20380.4%20L989.8%20378.5%20L990.3%20376.7%20L990.8%20374.8%20L991.1%20372.9%20L991.3%20371.1%20L991.4%20369.2%20L991.3%20367.4%20L991.2%20365.6%20L990.8%20363.8%20L990.4%20362%20L989.9%20360.1%20L989.3%20358.2%20L988.5%20356.3%20L987.7%20354.4%20L986.8%20352.5%20L985.7%20350.5%20L984.6%20348.6%20L983.4%20346.7%20L982.1%20344.8%20L980.7%20343%20L979.3%20341.2%20L977.8%20339.4%20L976.2%20337.7%20L974.6%20336.1%20L972.9%20334.5%20L971.1%20333%20L969.3%20331.6%20L967.4%20330.4%20L965.7%20329.3%20L964%20328.7%20L962.6%20328.4%20L961.2%20328.2%20L959.8%20328.3%20L958.3%20328.5%20L956.8%20328.7%20L955.1%20329%20L953.3%20329.3%20L951.3%20329.5%20L949%20329.5%20L946.5%20329.3%20L943.7%20328.8%20L940.6%20328%20L937.3%20326.8%20L933.5%20325.2%20L929.4%20323.1%20L924.9%20320.4%20L920%20317.2%20L914.5%20313.2%20L908.5%20308.2%20L902%20302%20L895.1%20294.6%20L887.9%20286.2%20L880.5%20277%20L872.9%20267.1%20L865.2%20256.6%20L857.4%20245.6%20L849.6%20234.3%20L841.8%20222.9%20L833.8%20211.5%20L825.8%20200.3%20L817.6%20189.5%20L809.2%20179.3%20L800.6%20169.9%20L791.6%20161.4%20L782.2%20154.1%20L772.4%20148.1%20L762%20143.7%20L750.8%20141.3%20L739.2%20141.6%20L727.8%20144.6%20L717.3%20149.7%20L707.5%20156.4%20L698.3%20164.5%20L689.6%20173.6%20L681.4%20183.7%20L673.7%20194.4%20L666.3%20205.6%20L659.2%20217.1%20L652.4%20228.6%20L645.7%20239.9%20L639%20250.8%20L632.2%20261.2%20L625.2%20270.6%20L617.9%20279.1%20L610.1%20286.3%20L601.8%20292%20L592.6%20295.9%20L582.6%20297.6%20L572.2%20296.5%20L561.9%20293.2%20L552%20287.9%20L542.3%20281%20L533%20272.7%20L524.1%20263.3%20L515.5%20253%20L507.3%20241.9%20L499.5%20230.2%20L492%20218.3%20L484.8%20206.2%20L477.9%20194.2%20L471.1%20182.5%20L464.3%20171.4%20L457.4%20161.1%20L450.4%20151.7%20L443.1%20143.6%20L435.2%20136.8%20L426.7%20131.6%20L417.4%20128.5%20L407.4%20127.9%20L397.2%20129.6%20L387.1%20133.4%20L377.1%20138.8%20L367.3%20145.6%20L357.7%20153.5%20L348.3%20162.3%20L339.1%20171.9%20L330.3%20181.9%20L321.7%20192.1%20L313.4%20202.4%20L305.4%20212.5%20L297.6%20222.2%20L290.1%20231.2%20L282.8%20239.3%20L275.7%20246.3%20L268.9%20251.9%20L262.4%20256%20L256.3%20258.6%20L250.2%20259.7%20L243.3%20259.3%20L235.4%20257.5%20L226.7%20254.3%20L217.5%20249.7%20L208%20244%20L198.1%20237.2%20L188.2%20229.4%20L178.2%20220.9%20L168.3%20211.7%20L158.6%20202.1%20L149.2%20192.1%20L140%20182%20L131.2%20171.8%20L122.8%20161.8%20L114.8%20152.1%20L107.4%20142.9%20L100.4%20134.3%20L93.9%20126.6%20L88%20119.8%20L82.7%20114.2%20L77.9%20109.4%20L73.7%20105.2%20L69.9%20101.5%20L66.6%2098.2%20L63.7%2095.4%20L61.2%2092.9%20L59%2090.7%20L57.1%2088.9%20L55.5%2087.2%20L54%2085.8%20L52.8%2084.5%20L51.7%2083.2%20L50.6%2082.1%20L49.6%2080.9%20L48.7%2079.7%20L47.7%2078.5%20L46.7%2077.1%20L45.5%2075.5%20L44.2%2073.7%20L42.7%2071.6%20L41.2%2069.3%20L39.6%2067%20L38.1%2064.6%20L36.6%2062.2%20L35.2%2059.7%20L33.8%2057.3%20L32.4%2054.8%20L31.1%2052.3%20L29.8%2049.8%20L28.5%2047.3%20L27.4%2044.8%20L26.2%2042.4%20L25.1%2040%20L24.1%2037.7%20L23.1%2035.4%20L22.2%2033.2%20L21.3%2031.1%20L20.6%2029%20L19.9%2027.1%20L19.2%2025.3%20L18.7%2023.6%20L18.3%2021.9%20L18%2020.3%20L17.7%2018.8%20L17.5%2017.3%20L17.4%2015.8%20L17.4%2014.4%20L17.4%2013%20L17.5%2011.6%20L17.6%2010.3%20L17.7%209.1%20L17.8%207.9%20L18%206.8%20L18.1%205.7%20L18.3%204.6%20L18.4%203.6%20L18.6%202.6%20L18.7%201.7%20L18.7%200.8%20L18.7%200%20Z%22/%3E%3Cpath%20fill=%22%2300d18e%22%20d=%22M906.3%20396.4%20L903.4%20393.7%20L900.8%20390.8%20L898.5%20387.8%20L896.5%20384.8%20L894.9%20381.6%20L893.5%20378.4%20L892.4%20375.2%20L891.6%20372%20L891.1%20368.8%20L890.9%20365.7%20L890.9%20362.7%20L891.2%20359.7%20L891.7%20356.8%20L892.4%20354.1%20L893.3%20351.5%20L894.4%20349%20L895.7%20346.8%20L897.1%20344.6%20L898.7%20342.7%20L900.3%20340.9%20L902.1%20339.3%20L903.9%20337.9%20L905.8%20336.7%20L907.7%20335.7%20L909.7%20334.9%20L911.7%20334.2%20L913.6%20333.7%20L915.6%20333.4%20L917.5%20333.3%20L919.4%20333.3%20L921.2%20333.5%20L923%20333.8%20L924.6%20334.2%20L926.2%20334.8%20L927.7%20335.5%20L929.1%20336.2%20L930.4%20337.1%20L931.6%20338.1%20L932.7%20339.1%20L933.7%20340.2%20L934.5%20341.3%20L935.3%20342.4%20L935.9%20343.6%20L936.4%20344.8%20L936.8%20346%20L937.1%20347.2%20L937.3%20348.4%20L937.4%20349.6%20L937.4%20350.8%20L937.3%20351.9%20L937.1%20353%20L936.8%20354%20L936.5%20355%20L936%20355.9%20L935.6%20356.7%20L935%20357.5%20L934.5%20358.3%20L933.8%20358.9%20L933.2%20359.5%20L932.5%20360%20L931.8%20360.5%20L931%20360.9%20L930.3%20361.2%20L929.6%20361.4%20L928.8%20361.6%20L928.1%20361.7%20L927.4%20361.8%20L926.7%20361.8%20L926%20361.7%20L925.4%20361.6%20L924.7%20361.4%20L924.1%20361.2%20L923.6%20361%20L923%20360.7%20L922.6%20360.3%20L922.1%20360%20L921.7%20359.6%20L921.3%20359.2%20L921%20358.8%20L920.7%20358.4%20L920.5%20357.9%20L920.3%20357.5%20L920.2%20357%20L920.1%20356.6%20L920%20356.1%20L920%20355.7%20L920%20355.3%20L920%20354.8%20L920.1%20354.4%20L920.2%20354.1%20L920.3%20353.7%20L920.5%20353.4%20L920.6%20353%20L920.8%20352.7%20L921%20352.5%20L921.3%20352.2%20L921.5%20352%20L921.8%20351.8%20L922%20351.6%20L922.3%20351.5%20L922.6%20351.4%20L922.8%20351.3%20L923.1%20351.2%20L923.4%20351.2%20L923.7%20351.1%20L923.9%20351.1%20L924.2%20351.2%20L924.4%20351.2%20L924.7%20351.2%20L924.9%20351.3%20L925.1%20350.8%20L924.9%20350.6%20L924.6%20350.6%20L924.3%20350.5%20L924%20350.4%20L923.7%20350.4%20L923.3%20350.4%20L923%20350.5%20L922.7%20350.5%20L922.3%20350.6%20L922%20350.8%20L921.6%20350.9%20L921.3%20351.1%20L921%20351.3%20L920.7%20351.6%20L920.4%20351.9%20L920.1%20352.2%20L919.9%20352.5%20L919.6%20352.9%20L919.4%20353.3%20L919.3%20353.8%20L919.1%20354.2%20L919%20354.7%20L919%20355.2%20L918.9%20355.7%20L919%20356.2%20L919%20356.8%20L919.1%20357.3%20L919.3%20357.8%20L919.5%20358.4%20L919.8%20358.9%20L920.1%20359.4%20L920.4%20359.9%20L920.9%20360.4%20L921.3%20360.9%20L921.8%20361.3%20L922.4%20361.7%20L923%20362.1%20L923.6%20362.4%20L924.3%20362.6%20L925.1%20362.9%20L925.8%20363%20L926.6%20363.1%20L927.4%20363.1%20L928.2%20363.1%20L929.1%20363%20L930%20362.8%20L930.8%20362.6%20L931.7%20362.2%20L932.5%20361.8%20L933.3%20361.3%20L934.1%20360.7%20L934.9%20360.1%20L935.6%20359.3%20L936.3%20358.5%20L937%20357.6%20L937.5%20356.6%20L938%20355.6%20L938.4%20354.5%20L938.8%20353.3%20L939%20352.1%20L939.2%20350.9%20L939.2%20349.6%20L939.1%20348.2%20L939%20346.9%20L938.7%20345.5%20L938.2%20344.2%20L937.7%20342.8%20L937%20341.5%20L936.2%20340.1%20L935.3%20338.9%20L934.2%20337.6%20L933%20336.5%20L931.7%20335.4%20L930.3%20334.4%20L928.7%20333.5%20L927.1%20332.7%20L925.3%20332%20L923.5%20331.5%20L921.5%20331.1%20L919.5%20330.9%20L917.4%20330.9%20L915.3%20331%20L913.2%20331.3%20L911%20331.8%20L908.8%20332.4%20L906.6%20333.3%20L904.5%20334.4%20L902.4%20335.7%20L900.3%20337.2%20L898.4%20338.9%20L896.5%20340.8%20L894.8%20342.9%20L893.2%20345.2%20L891.8%20347.7%20L890.6%20350.4%20L889.5%20353.2%20L888.7%20356.2%20L888.1%20359.3%20L887.7%20362.5%20L887.6%20365.8%20L887.8%20369.2%20L888.3%20372.7%20L889.1%20376.1%20L890.2%20379.6%20L891.7%20383.1%20L893.4%20386.6%20L895.5%20389.9%20L897.9%20393.2%20L900.7%20396.3%20L903.7%20399.2%20Z%22/%3E%3C/svg%3E");
background-size:100% 100%;
transform:scaleX(var(--remate,1));
}
/* Si la última fila es PAR, la pasada va de derecha a izquierda y el remate se
pinta en espejo. Se sabe por dónde cae el último <li> dentro de la tanda de
doce, así que sigue sin haber nada que tocar al añadir una hoja. */
.enredadera:has(> li:last-child:nth-child(12n+7)),
.enredadera:has(> li:last-child:nth-child(12n+8)),
.enredadera:has(> li:last-child:nth-child(12n+9)),
.enredadera:has(> li:last-child:nth-child(12n+10)),
.enredadera:has(> li:last-child:nth-child(12n+11)),
.enredadera:has(> li:last-child:nth-child(12n+12)){ --remate:-1; }
/* Cada celda sostiene una hoja. La hoja se ancla al punto exacto por el que
pasa la raíz en esa columna (--y), calculado del mismo dibujo. */
.enredadera > li{ position:relative; }
/* ===================== LA ENTRADA =====================
Al cargar, cada hoja se despliega desde su punto de agarre al tallo, en
orden a lo largo de la raíz. Se anima el <li>, no la hoja, para no pisar
el transform que la coloca ni el del ratón encima.
El origen del giro es justo donde el rabillo toca la raíz: eso lo dice
--y, la misma variable que sitúa la hoja. Por eso parece que brota de la
rama y no que aparece en el aire.
Termina en el estado normal (opacity:1, transform:none), así que a los
0.8s la página es exactamente la de siempre. */
@keyframes brotar{
from{ opacity:0; transform:scale(.82) rotate(-6deg); }
to { opacity:1; transform:none; }
}
.enredadera > li{
transform-origin:50% calc(var(--y,50) * 1%);
animation:brotar .5s cubic-bezier(.22,1,.36,1) both;
/* El retardo se compone de dos partes: la columna y la fila. Con el ciclo
de seis a secas, en colectivos.html —que tiene doce hojas en dos filas—
la 7 salía a la vez que la 1 y parecían dos olas paralelas en vez de una
enredadera creciendo. Sumando el retardo de fila, la segunda arranca
cuando la primera termina, y la 13 seguiría la cuenta sin tocar nada. */
animation-delay:calc(var(--tanda,0s) + var(--fila-tanda,0s));
}
.enredadera > li:nth-child(12n+1){ --tanda:0s; }
.enredadera > li:nth-child(12n+2){ --tanda:.06s;}
.enredadera > li:nth-child(12n+3){ --tanda:.12s;}
.enredadera > li:nth-child(12n+4){ --tanda:.18s;}
.enredadera > li:nth-child(12n+5){ --tanda:.24s;}
.enredadera > li:nth-child(12n+6){ --tanda:.30s;}
/* La fila par va al revés: el tallo la recorre de derecha a izquierda,
así que la hoja que brota primero es la de la última columna. */
.enredadera > li:nth-child(12n+7){ --tanda:.30s;}
.enredadera > li:nth-child(12n+8){ --tanda:.24s;}
.enredadera > li:nth-child(12n+9){ --tanda:.18s;}
.enredadera > li:nth-child(12n+10){ --tanda:.12s;}
.enredadera > li:nth-child(12n+11){ --tanda:.06s;}
.enredadera > li:nth-child(12n+12){ --tanda:0s; }
.enredadera > li:nth-child(n+7) { --fila-tanda:.36s; }
.enredadera > li:nth-child(n+13) { --fila-tanda:.72s; }
.hoja{
--giro:0deg;
--trazo:var(--rosa);
--nervio:var(--verde-vivo);
--rabillo:var(--negro);
--halo:0 0 0 rgba(0,0,0,0);
position:absolute; left:50%;
top:calc(var(--y,50) / 100 * var(--fila));
display:block; text-decoration:none;
/* El tope también lleva --tam. Con el tope plano en --col, cuatro de las
seis hojas chocaban con él y salían EXACTAMENTE iguales; a 1024 las
seis. La variedad de tamaños del diseño (--tam de 0.86 a 1.1) sólo se
veía en móvil. Dividiendo por 1.1 —el --tam mayor— la hoja más grande
sigue midiendo justo una columna y las demás guardan su proporción. */
width:min(calc(var(--hoja-base) * .50 * var(--tam,1)),
calc(var(--col) * var(--tam,1) / 1.1));
transform-origin:50% 1.52%; /* la punta del rabillo, arriba del recuadro */
transform:translate(var(--centrar,-50%), var(--colgar,0%)) rotate(var(--giro));
transition:transform .35s cubic-bezier(.22,1,.36,1), filter .25s;
will-change:transform;
}
.hoja-svg{ display:block; width:100%; height:auto; overflow:visible; filter:var(--halo); transition:filter .25s; }
.hoja-txt{
/* 56% y no 50%: el rabillo está arriba del recuadro y el limbo cuelga por
debajo, así que el centro del DIBUJO no es el centro de la caja. Medido
aislando cada hoja y comparando el centro de los píxeles rosas con el de
la etiqueta: con 52% se iba 14.5px de media hacia el rabillo; con 56%,
2.9px. Probados también 59% y 62%, que se pasan al otro lado.
Al alargar el rabillo el recuadro pasó de 114 a 132 de alto, así que el
mismo punto del limbo cae ahora en el 62%: (132 - 50.2) / 132. */
position:absolute; left:50%; top:62%;
transform:translate(-50%,-50%) rotate(calc(-1 * var(--giro)));
width:60%; text-align:center;
font-family:var(--titular);
font-size:clamp(.78rem,.56rem + .70vw,1.2rem);
line-height:1.12; letter-spacing:.06em;
text-transform:uppercase; color:var(--tinta);
pointer-events:none;
/* Sin break-word: partía DENTRO de la palabra y salía «CALENDARI / O».
Así una palabra suelta sobresale un poco del limbo —el calado la separa
igual del dibujo— y las de varias palabras siguen partiendo por el
espacio, que es donde toca. */
/* Un claro en el dibujo: el fondo rodea las letras para que los nervios no
las crucen. Es un calado, no una caja. */
text-shadow:
0 0 7px var(--verde), 0 0 7px var(--verde), 0 0 7px var(--verde),
0 0 4px var(--verde), 0 0 4px var(--verde), 0 0 2px var(--verde);
transition:color .25s;
}
/* :active va aquí porque en un móvil NO HAY :hover: al tocar una hoja no
pasaba nada visible salvo un scale(1.01) imperceptible. Con el mismo
encendido que el ratón, el toque responde. */
.hoja:hover, .hoja:focus-visible, .hoja:active{
transform:translate(var(--centrar,-50%), var(--colgar,0%)) rotate(var(--giro)) scale(1.07);
--trazo:var(--rosa-vivo);
--nervio:var(--rosa);
--halo:drop-shadow(0 0 3px var(--rosa)) drop-shadow(0 0 11px var(--rosa)) drop-shadow(0 0 28px var(--rosa-tenue));
}
.hoja:hover .hoja-txt,
.hoja:focus-visible .hoja-txt,
.hoja:active .hoja-txt{ color:var(--rosa-encendido); }
/* Al pulsar, se hunde un poco respecto al estado encendido: el dedo empuja. */
.hoja:active{ transform:translate(var(--centrar,-50%), var(--colgar,0%)) rotate(var(--giro)) scale(1.02); }
/* Colectivo que aún no ha escrito su ficha: mismo dibujo, más callado */
/* Hoja de un colectivo cuya ficha aún está por escribir: se dibuja tenue.
La opacidad va en el DIBUJO, no en el enlace entero: puesta en el enlace
arrastraba también a la etiqueta y la dejaba en 3.4:1 sobre el verde, por
debajo del mínimo. Con el dibujo al 50% el aviso visual es igual de claro
y el nombre se sigue leyendo a 13:1. */
.hoja.brota .hoja-svg{ opacity:.5; transition:opacity .25s; }
.hoja.brota:hover .hoja-svg,
.hoja.brota:focus-visible .hoja-svg,
.hoja.brota:active .hoja-svg{ opacity:1; }
/* Los puntos por los que pasa la raíz. Alternan cresta y valle: de las
crestas cuelga una hoja hacia abajo y de los valles sale una hacia arriba,
así cada hoja ocupa el hueco que la raíz le deja y no se pisan. Vecinas se
inclinan a lados opuestos. Todo sale del mismo cálculo que dibujó la raíz.
La tanda es de DOCE y no de seis porque el dibujo del tallo son dos filas:
la pasada y su espejo. Añadir una hoja sigue siendo añadir un <li>. */
.enredadera > li:nth-child(12n+1){ --y:27.0; }
.enredadera > li:nth-child(12n+1) .hoja{ --giro:2deg; --tam:1.04; }
.enredadera > li:nth-child(12n+2){ --y:64.0; }
.enredadera > li:nth-child(12n+2) .hoja{ --giro:151deg; --tam:1.00; }
.enredadera > li:nth-child(12n+3){ --y:32.0; }
.enredadera > li:nth-child(12n+3) .hoja{ --giro:26deg; --tam:1.1; }
.enredadera > li:nth-child(12n+4){ --y:69.0; }
.enredadera > li:nth-child(12n+4) .hoja{ --giro:154deg; --tam:0.92; }
.enredadera > li:nth-child(12n+5){ --y:37.0; }
.enredadera > li:nth-child(12n+5) .hoja{ --giro:31deg; --tam:1.0; }
.enredadera > li:nth-child(12n+6){ --y:74.0; }
/* La última va más derecha que sus hermanas de valle (151 y 154): a 149
se cruzaba con la raíz por el lóbulo de abajo y la etiqueta caía encima
del trazo. Y es la más grande porque cierra la fila. */
.enredadera > li:nth-child(12n+6) .hoja{ --giro:164deg; --tam:1.16; }
/* La fila par lleva el dibujo en espejo, así que sus seis anclajes son
los mismos leídos del revés y las hojas se inclinan al otro lado: el
giro cambia de signo. Es la misma cuenta, reflejada. */
.enredadera > li:nth-child(12n+7){ --y:74.0; }
.enredadera > li:nth-child(12n+7) .hoja{ --giro:-164deg; --tam:1.16; }
.enredadera > li:nth-child(12n+8){ --y:37.0; }
.enredadera > li:nth-child(12n+8) .hoja{ --giro:-31deg; --tam:1.0; }
.enredadera > li:nth-child(12n+9){ --y:69.0; }
.enredadera > li:nth-child(12n+9) .hoja{ --giro:-154deg; --tam:0.92; }
.enredadera > li:nth-child(12n+10){ --y:32.0; }
.enredadera > li:nth-child(12n+10) .hoja{ --giro:-26deg; --tam:1.1; }
.enredadera > li:nth-child(12n+11){ --y:64.0; }
.enredadera > li:nth-child(12n+11) .hoja{ --giro:-151deg; --tam:1.00; }
.enredadera > li:nth-child(12n+12){ --y:27.0; }
.enredadera > li:nth-child(12n+12) .hoja{ --giro:-2deg; --tam:1.04; }
/* ============================ 6. FICHAS ============================ */
.ficha{
display:none; position:fixed; inset:0; z-index:1200; overflow-y:auto;
background:rgba(30,42,23,.45); backdrop-filter:blur(3px);
padding:clamp(0px,5vh,60px) clamp(0px,4vw,40px);
}
/* La ficha entraba de golpe: `display` no se puede transicionar, así que la
suavidad tiene que venir de una animación, que sí arranca cuando :target
pasa a aplicar. Al cerrar no hay salida posible sin JavaScript, y esa
asimetría es la normal en un modal de CSS puro.
Termina en el estado normal (`transform:none`), así que no deja atrás un
contenedor que estropee la cabecera pegajosa de la tarjeta. */
@keyframes ficha-entra{ from{ opacity:0; } to{ opacity:1; } }
@keyframes caja-entra{
from{ opacity:0; transform:translateY(14px) scale(.985); }
to { opacity:1; transform:none; }
}
.ficha:target{ animation:ficha-entra .22s ease both; }
.ficha:target .ficha-caja{ animation:caja-entra .3s cubic-bezier(.22,1,.36,1) both; }
.ficha:target{ display:block; }
/* Pulsar fuera cierra, sin JavaScript: es un enlace que ocupa el fondo */
.ficha-fondo{ position:fixed; inset:0; z-index:0; cursor:pointer; }
.ficha-caja{
position:relative; z-index:1; max-width:720px; margin:0 auto;
background:var(--verde-humo); border:2px solid var(--rosa);
border-radius:var(--curva); box-shadow:0 24px 70px rgba(30,42,23,.3);
/* Desplaza la TARJETA, no el fondo. Antes desplazaba .ficha y la cabecera
se iba con el contenido: a 320px, al bajar a leer, la ✕ quedaba 128px por
encima del borde y había que subir del todo para cerrar. Con la tarjeta
como contenedor de desplazamiento, su cabecera puede quedarse pegada. */
max-height:100%; overflow:hidden auto;
}
.ficha-cab{
position:sticky; top:0; z-index:2; background:var(--verde-humo);
display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
padding:clamp(20px,3vw,32px) clamp(20px,3vw,34px) clamp(14px,2vw,20px);
border-bottom:var(--pluma) solid var(--rosa-tenue);
}
.ficha-cab h2{
margin:0; font-family:var(--marca); color:var(--rosa);
font-size:clamp(1.25rem,.9rem + 1.5vw,2rem); line-height:1.12; text-transform:uppercase;
}
.ficha-cerrar{
flex:0 0 auto; width:44px; height:44px; /* mínimo táctil */
display:flex; align-items:center; justify-content:center;
font-size:1.1rem; text-decoration:none; color:var(--rosa-legible);
border:2px solid var(--rosa); border-radius:50%;
transition:transform .2s, box-shadow .2s;
}
.ficha-cerrar:hover,
.ficha-cerrar:active{ transform:rotate(90deg); box-shadow:0 0 12px var(--rosa-tenue); }
.ficha-cuerpo{ padding:clamp(20px,3vw,34px); font-family:var(--lectura); line-height:1.65; font-size:1rem; }
.ficha-cuerpo p{ margin:0 0 1.1em; }
.ficha-cuerpo p:last-child{ margin-bottom:0; }
.ficha-cuerpo img{
width:100%; max-height:min(32vh,270px); object-fit:cover;
border:var(--pluma) solid var(--verde-vivo); border-radius:var(--curva); margin:0 0 22px;
}
.ficha-cuerpo .aviso{
padding:18px 20px; border:var(--pluma) dashed var(--verde-vivo);
border-radius:var(--curva); color:var(--tinta-suave);
}
.enlaces{ display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 0; padding:0; list-style:none; }
.enlaces a{
display:inline-flex; align-items:center; min-height:44px; padding:9px 20px;
font-family:var(--titular); font-size:.76rem;
letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
color:var(--rosa-legible); border:2px solid var(--rosa); border-radius:999px;
transition:background .2s, color .2s, box-shadow .2s;
}
.enlaces a:hover,
.enlaces a:active{ background:var(--rosa-legible); color:var(--verde-humo); box-shadow:0 0 18px var(--rosa-tenue); }
/* ========================== 7. CALENDARIOS ========================== */
.pantalla{ padding:0 clamp(16px,5vw,60px) 70px; font-family:var(--lectura); font-size:1rem; line-height:1.65; }
.pantalla > h2{
font-family:var(--titular); color:var(--rosa);
font-size:clamp(1.4rem,1rem + 2vw,2.3rem); text-transform:uppercase; margin:0 0 8px;
}
.pantalla > .pie{ color:var(--tinta-suave); margin:0 0 32px; max-width:70ch; }
.cal-controls{ display:flex; align-items:center; justify-content:center; gap:22px; margin:0 0 22px; }
.cal-controls .button{
width:44px; height:44px; cursor:pointer; font-size:1rem;
color:var(--rosa-legible); background:transparent;
border:2px solid var(--rosa); border-radius:50%;
transition:background .2s, color .2s;
}
.cal-controls .button:hover,
.cal-controls .button:active{ background:var(--rosa-legible); color:var(--verde-humo); }
.cal-title{
font-family:var(--titular); font-size:clamp(1rem,.85rem + .8vw,1.5rem);
text-transform:uppercase; letter-spacing:.06em; min-width:12ch; text-align:center;
}
.cal{ border:var(--pluma) solid var(--verde-vivo); border-radius:var(--curva); overflow:hidden; background:var(--verde-humo); }
.cal-row{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
/* El calendario dibuja SIEMPRE seis semanas, y hay meses que caben en cinco:
septiembre de 2026 dejaba 110px de rejilla vacía debajo del día 30. Se
esconde la fila que no tiene ni un día, sin tocar el guión que la genera.
Con :not(:has(...)) sólo cae la semana entera vacía: una que acabe a medias
—día 31 en lunes— conserva sus celdas. Los navegadores sin :has() se
quedan como estaban. */
.cal-row:not(.cal-head):not(:has(.cal-cell:not(:empty))){ display:none; }
.cal-cell{
min-height:clamp(56px,8.5vw,110px); padding:7px 6px 8px;
border-right:var(--pluma) solid var(--rosa-papel);
border-bottom:var(--pluma) solid var(--rosa-papel);
display:flex; flex-direction:column; gap:3px;
}
.cal-row > .cal-cell:last-child{ border-right:none; }
/* El JS marca las cabeceras como "cal-cell cal-head-cell": hay que
deshacerles el alto mínimo y el tinte de las celdas normales. */
.cal-head-cell{
min-height:0; align-items:center; justify-content:center;
font-family:var(--titular); font-size:.74rem; letter-spacing:.16em;
padding:14px 2px; color:var(--rosa-legible); background:transparent;
border-bottom:var(--pluma) solid var(--rosa-tenue);
}
.cal-row:not(.cal-head) > .cal-cell:nth-child(6),
.cal-row:not(.cal-head) > .cal-cell:nth-child(7){ background:var(--verde-hondo); }
.cal-empty{ opacity:.4; }
.cal-daynum{ font-family:var(--titular); font-size:.78rem; color:var(--tinta-suave); }
.cal-today{ box-shadow:inset 0 0 0 2.5px var(--rosa); }
.cal-today .cal-daynum{ color:var(--rosa-legible); } /* si hoy cae en finde,
el numero queda sobre la celda tintada: el rosa vivo da 2.86:1 ahi */
.cal-pills{ display:flex; flex-direction:column; gap:3px; }
.cal-pill{
background:var(--bg); color:var(--fg); /* reserva para navegadores viejos */
font-family:var(--titular); font-size:clamp(.5rem,.34rem + .48vw,.7rem);
line-height:1.3; padding:3px 9px; border-radius:999px; cursor:pointer;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
transition:background .18s, transform .18s;
}
/* Los colores de cada colectivo los inyecta el JS en --bg y --fg. En bloque
sólido pelean con el dibujo de línea, así que aquí se usan lavados. */
@supports (background: color-mix(in srgb, red 10%, transparent)){
.cal-pill{
background:color-mix(in srgb, var(--bg) 20%, transparent);
color:var(--tinta);
box-shadow:inset 0 0 0 1.2px color-mix(in srgb, var(--bg) 62%, transparent),
inset 0 0 0 1.3px rgba(30,42,23,.17);
}
.cal-pill:hover,
.cal-pill:active{ background:color-mix(in srgb, var(--bg) 42%, transparent); }
}
.cal-pill:hover, .cal-pill:active{ transform:translateX(2px); }
.cal-legend{
display:flex; flex-wrap:wrap; gap:10px 24px; margin:26px 0 0; padding:22px;
border:var(--pluma) solid var(--verde-vivo); border-radius:var(--curva);
}
.cal-legend-item{ display:inline-flex; align-items:center; gap:9px; font-size:.85rem; color:var(--tinta-suave); }
.cal-legend-dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; filter:saturate(.8); }
gancio-calendar{
/* OJO: pasarle variables --calendar-* NO SIRVE DE NADA. El componente las
redefine dentro de su propio shadow DOM (una tanda para .light y otra
para .dark), y esa definición gana a la que herede del host: se le pasaba
--calendar-surface:#f5faef y su .calendar seguía calculando #ffffff.
Tampoco expone ningún ::part. Comprobado leyendo su CSS interno.
Así que lo único que se puede hacer es enmarcarlo desde fuera, y eso es
lo que hay aquí: que la tarjeta blanca se lea como un panel puesto a
propósito y no como un pegote. */
display:block; width:100%;
border:2px solid var(--rosa);
border-radius:var(--curva);
overflow:hidden;
box-shadow:0 10px 34px rgba(30,42,23,.10);
background:var(--verde-humo);
}
.gancio-fallback{
border:var(--pluma) dashed var(--verde-vivo); border-radius:var(--curva);
padding:34px 26px; text-align:center; color:var(--tinta-suave);
}
/* Este aviso sólo se ve si el componente externo no carga, y por eso el
banco NO lo mide: cuando mide, el componente ya está puesto y esto no se
dibuja. En rosa fuerte daba 3.4:1 a 16px en negrita, por debajo del
mínimo. Comprobado bloqueando rosa.frama.io. */
.gancio-fallback strong{ color:var(--rosa-legible); }
/* ========================= 8. PÁGINAS DE TEXTO ========================= */
.texto{
max-width:68ch; margin:0 auto;
padding:clamp(16px,3vw,32px) clamp(20px,5vw,40px) 90px;
font-family:var(--lectura);
font-size:clamp(1rem,.95rem + .2vw,1.08rem); line-height:1.72;
}
.texto h2{
font-family:var(--titular); color:var(--rosa);
font-size:clamp(1.5rem,1.1rem + 2vw,2.4rem);
line-height:1.06; text-transform:uppercase; margin:2.4em 0 .7em;
}
.texto h2:first-child{ margin-top:0; }
.texto h3{
font-family:var(--titular); color:var(--verde-hoja);
font-size:clamp(1rem,.9rem + .55vw,1.25rem);
letter-spacing:.05em; text-transform:uppercase; margin:2em 0 .5em;
}
.texto p{ margin:0 0 1.3em; }
.texto ul{ margin:0 0 1.4em; padding-left:1.2em; }
.texto li{ margin-bottom:.6em; }
.texto li::marker{ color:var(--rosa); }
.tarjeta{
padding:clamp(20px,3vw,30px); margin:0 0 20px;
border:var(--pluma) solid var(--verde-vivo); border-radius:var(--curva);
transition:border-color .25s, box-shadow .25s;
}
.tarjeta:hover{ border-color:var(--rosa); box-shadow:0 0 22px var(--rosa-papel); }
.tarjeta h3{ margin-top:0; color:var(--rosa-legible); } /* En rosa fuerte da 3.12:1: pasa de milagro como texto grande en
ordenador, pero por debajo de 768 la fuente baja de 24px y ya no
cuenta como grande. Se pide 4.5 y hay que darlo. */
.pie-pagina{
margin:0 clamp(20px,5vw,60px); padding:clamp(10px,1.9vh,26px) 0 clamp(10px,1.9vh,26px);
border-top:var(--pluma) solid var(--rosa-tenue);
text-align:center; font-family:var(--mano);
font-size:.58rem; line-height:2.2; color:var(--tinta-suave);
}
/* ========================== 9. PANTALLAS ========================== */
/* Dos columnas: dos raíces salen del título */
@media (min-width:1024px){
.enredadera-wrap::before{ height:var(--bajada); }
}
/* Tres columnas: tres raíces */
@media (max-width:560px){
.cal-cell{ min-height:54px; padding:5px 3px 6px; }
.cal-legend{ gap:8px 14px; padding:16px; }
.ficha{ padding:0; }
.ficha-caja{ border:none; border-radius:0; min-height:100vh; }
.sidebar{ padding:92px 28px 40px; }
}
/* En móvil vuelve a ser lo que era: un tallo vertical, casi recto, con las
hojas alternando a un lado y a otro. Ahí sí se puede deslizar. */
@media (max-width:1023px){
/* 68 y no 104: eran 104px de aire sobre el título, y ese hueco es justo lo
que hacía falta para que las seis hojas entren sin deslizar. El botón
del menú va a la izquierda y el título centrado, así que no chocan. */
.cabecera{ padding-top:68px; }
/* Móvil apaisado: con 360px de alto, 104px de hueco sobre el título es el
29% de la pantalla y de la enredadera sólo asoma una punta de hoja. El
botón del menú está a la izquierda y el título va centrado, así que no se
estorban aunque se suban. */
@media (max-height:520px){
.cabecera{ padding-top:56px; }
.enredadera-wrap::before{ height:calc(var(--ancho-hoja) * .73); }
}
/* El suelo no puede ser mayor que lo que cabe: la hoja gira sobre su punto
de agarre, asi que su dibujo se va a un lado y el borde queda en
160 + 1.244*ancho. Con 124px, "Eventos" (--tam 1.1) se salia 7px a 320. */
/* El tope sale de la medida, no del ojo: girada 248/112 grados, la hoja
acaba su borde derecho en W/2 + 1.532*ancho. Ese 1.532 era 1.244 cuando
el recuadro medía 114 de alto; con el rabillo largo mide 132 y "Eventos"
(--tam 1.1) se salía entre 7 y 19px. Con 31.5vw entra en los seis anchos. */
.enredadera-wrap{
/* La hoja se mide contra las DOS dimensiones. Sólo con vw, en una pantalla
baja las seis hojas no entraban y había que deslizar. */
--ancho-hoja:clamp(84px, min(28vw, 13.6vh), 318px);
/* La celda es más corta que la hoja a propósito: las hojas alternan lado,
así que se entrelazan como en una enredadera de verdad en vez de ir en
fila de a una. Lo que se reparte entre las seis es lo que queda tras la
cabecera, el hueco de entrada y lo que la última asoma por abajo. */
--celda:clamp(46px, calc((100vh - 136px - var(--ancho-hoja) * 1.44) / 6), 210px);
--celda:clamp(46px, calc((100dvh - 136px - var(--ancho-hoja) * 1.44) / 6), 210px);
}
/* El trazo de ordenador es horizontal (viewBox 1000x44): comprimido en
vertical se deforma, por eso aqui NO se usa. En su lugar el ::before lleva
el MISMO trazo vertical que los <li>, asi que empalma con el primero sin
junta y el tallo nace del titulo en vez de aparecer en el aire.
Su altura hace ademas de hueco bajo la cabecera: las hojas de movil giran
248/112 grados, apuntan hacia ARRIBA y sobresalen ~0.9 de su ancho por
encima de donde se agarran, asi que ese hueco tiene que crecer con la
hoja. Con un numero fijo, en tablet la primera hoja se comia el subtitulo. */
.enredadera-wrap::before{
display:block;
height:calc(var(--ancho-hoja) * .98); /* la hoja vuela .965 del ancho */
/*@movil2*/background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%2314170f%22%20stroke=%22%2314170f%22%20stroke-width=%22.5%22%20stroke-linejoin=%22round%22%20d=%22M19.5%20-4.3%20L19.4%20-3.3%20L19.4%20-2.4%20L19.3%20-1.4%20L19.3%20-0.4%20L19.3%200.5%20L19.3%201.5%20L19.4%202.5%20L19.5%203.4%20L19.5%204.4%20L19.7%205.4%20L19.8%206.3%20L20%207.3%20L20.2%208.3%20L20.4%209.2%20L20.6%2010.2%20L20.9%2011.1%20L21.2%2012.1%20L21.5%2013%20L21.8%2014%20L22.1%2014.9%20L22.5%2015.9%20L22.9%2016.8%20L23.3%2017.8%20L23.7%2018.7%20L24.2%2019.7%20L24.6%2020.6%20L25.1%2021.6%20L25.6%2022.5%20L26.1%2023.4%20L26.7%2024.4%20L27.2%2025.3%20L27.8%2026.2%20L28.4%2027.1%20L29%2028.1%20L29.6%2029%20L30.2%2029.9%20L30.8%2030.8%20L31.5%2031.8%20L32.2%2032.7%20L32.8%2033.6%20L33.5%2034.5%20L34.2%2035.4%20L34.9%2036.4%20L35.6%2037.3%20L36.4%2038.2%20L37.1%2039.1%20L37.9%2040%20L38.6%2040.9%20L39.4%2041.8%20L40.1%2042.7%20L40.9%2043.7%20L41.7%2044.6%20L42.4%2045.5%20L43.2%2046.4%20L44%2047.3%20L44.8%2048.2%20L45.6%2049.1%20L46.4%2050%20L47.2%2050.9%20L48%2051.8%20L48.8%2052.7%20L49.6%2053.6%20L50.3%2054.5%20L51.1%2055.4%20L51.9%2056.3%20L52.7%2057.2%20L53.5%2058.1%20L54.2%2059%20L55%2059.9%20L55.7%2060.7%20L56.5%2061.6%20L57.2%2062.5%20L58%2063.4%20L58.7%2064.3%20L59.4%2065.2%20L60.1%2066.1%20L60.8%2067%20L61.5%2067.8%20L62.2%2068.7%20L62.8%2069.6%20L63.5%2070.5%20L64.1%2071.4%20L64.7%2072.2%20L65.3%2073.1%20L65.9%2074%20L66.5%2074.9%20L67.1%2075.7%20L67.6%2076.6%20L68.2%2077.5%20L68.7%2078.4%20L69.2%2079.2%20L69.6%2080.1%20L70.1%2081%20L70.5%2081.8%20L71%2082.7%20L71.4%2083.5%20L71.8%2084.4%20L72.1%2085.2%20L72.5%2086.1%20L72.8%2086.9%20L73.1%2087.8%20L73.4%2088.6%20L73.7%2089.5%20L73.9%2090.3%20L74.1%2091.2%20L74.4%2092%20L74.5%2092.9%20L74.7%2093.7%20L74.9%2094.5%20L75%2095.4%20L75.1%2096.2%20L75.2%2097%20L75.2%2097.9%20L75.3%2098.7%20L75.3%2099.5%20L75.3%20100.4%20L75.3%20101.2%20L75.2%20102%20L75.2%20102.9%20L75.1%20103.7%20L80.5%20104.3%20L80.6%20103.3%20L80.6%20102.4%20L80.7%20101.4%20L80.7%20100.4%20L80.7%2099.5%20L80.7%2098.5%20L80.6%2097.5%20L80.5%2096.6%20L80.5%2095.6%20L80.3%2094.6%20L80.2%2093.7%20L80%2092.7%20L79.8%2091.7%20L79.6%2090.8%20L79.4%2089.8%20L79.1%2088.9%20L78.8%2087.9%20L78.5%2087%20L78.2%2086%20L77.9%2085.1%20L77.5%2084.1%20L77.1%2083.2%20L76.7%2082.2%20L76.3%2081.3%20L75.8%2080.3%20L75.4%2079.4%20L74.9%2078.4%20L74.4%2077.5%20L73.9%2076.6%20L73.3%2075.6%20L72.8%2074.7%20L72.2%2073.8%20L71.6%2072.9%20L71%2071.9%20L70.4%2071%20L69.8%2070.1%20L69.2%2069.2%20L68.5%2068.2%20L67.8%2067.3%20L67.2%2066.4%20L66.5%2065.5%20L65.8%2064.6%20L65.1%2063.6%20L64.4%2062.7%20L63.6%2061.8%20L62.9%2060.9%20L62.1%2060%20L61.4%2059.1%20L60.6%2058.2%20L59.9%2057.3%20L59.1%2056.3%20L58.3%2055.4%20L57.6%2054.5%20L56.8%2053.6%20L56%2052.7%20L55.2%2051.8%20L54.4%2050.9%20L53.6%2050%20L52.8%2049.1%20L52%2048.2%20L51.2%2047.3%20L50.4%2046.4%20L49.7%2045.5%20L48.9%2044.6%20L48.1%2043.7%20L47.3%2042.8%20L46.5%2041.9%20L45.8%2041%20L45%2040.1%20L44.3%2039.3%20L43.5%2038.4%20L42.8%2037.5%20L42%2036.6%20L41.3%2035.7%20L40.6%2034.8%20L39.9%2033.9%20L39.2%2033%20L38.5%2032.2%20L37.8%2031.3%20L37.2%2030.4%20L36.5%2029.5%20L35.9%2028.6%20L35.3%2027.8%20L34.7%2026.9%20L34.1%2026%20L33.5%2025.1%20L32.9%2024.3%20L32.4%2023.4%20L31.8%2022.5%20L31.3%2021.6%20L30.8%2020.8%20L30.4%2019.9%20L29.9%2019%20L29.5%2018.2%20L29%2017.3%20L28.6%2016.5%20L28.2%2015.6%20L27.9%2014.8%20L27.5%2013.9%20L27.2%2013.1%20L26.9%2012.2%20L26.6%2011.4%20L26.3%2010.5%20L26.1%209.7%20L25.9%208.8%20L25.6%208%20L25.5%207.1%20L25.3%206.3%20L25.1%205.5%20L25%204.6%20L24.9%203.8%20L24.8%203%20L24.8%202.1%20L24.7%201.3%20L24.7%200.5%20L24.7%20-0.4%20L24.7%20-1.2%20L24.8%20-2%20L24.8%20-2.9%20L24.9%20-3.7%20Z%22/%3E%3Cpath%20fill=%22%23ff00aa%22%20stroke=%22%23ff00aa%22%20stroke-width=%22.4%22%20stroke-linejoin=%22round%22%20d=%22M20.5%20-4.2%20L20.4%20-3.3%20L20.3%20-2.4%20L20.3%20-1.4%20L20.2%20-0.5%20L20.2%200.4%20L20.1%201.4%20L20.1%202.3%20L20.1%203.3%20L20.1%204.2%20L20.2%205.2%20L20.3%206.1%20L20.3%207.1%20L20.5%208%20L20.6%209%20L20.7%2010%20L20.9%2011%20L21.1%2011.9%20L21.3%2012.9%20L21.5%2013.9%20L21.7%2014.9%20L22%2015.9%20L22.3%2016.9%20L22.6%2017.9%20L22.9%2018.9%20L23.2%2019.9%20L23.6%2020.9%20L24%2021.9%20L24.4%2022.9%20L24.8%2023.9%20L25.2%2025%20L25.6%2026%20L26.1%2027%20L26.6%2028%20L27.1%2029.1%20L27.6%2030.1%20L28.1%2031.1%20L28.6%2032.1%20L29.2%2033.2%20L29.8%2034.2%20L30.4%2035.2%20L30.9%2036.2%20L31.6%2037.2%20L32.2%2038.3%20L32.8%2039.3%20L33.5%2040.3%20L34.1%2041.3%20L34.8%2042.3%20L35.5%2043.3%20L36.1%2044.3%20L36.8%2045.3%20L37.5%2046.3%20L38.3%2047.3%20L39%2048.3%20L39.7%2049.3%20L40.5%2050.2%20L41.2%2051.2%20L42%2052.2%20L42.7%2053.1%20L43.5%2054%20L44.3%2055%20L45%2055.9%20L45.8%2056.8%20L46.6%2057.7%20L47.4%2058.6%20L48.2%2059.5%20L49%2060.4%20L49.8%2061.3%20L50.5%2062.2%20L51.3%2063%20L52.1%2063.9%20L52.9%2064.8%20L53.7%2065.6%20L54.5%2066.4%20L55.3%2067.3%20L56%2068.1%20L56.8%2068.9%20L57.6%2069.7%20L58.3%2070.5%20L59.1%2071.3%20L59.8%2072.1%20L60.5%2072.9%20L61.3%2073.7%20L62%2074.4%20L62.7%2075.2%20L63.4%2076%20L64.1%2076.8%20L64.7%2077.5%20L65.4%2078.3%20L66%2079.1%20L66.7%2079.8%20L67.3%2080.6%20L67.9%2081.4%20L68.5%2082.1%20L69%2082.9%20L69.6%2083.7%20L70.1%2084.4%20L70.6%2085.2%20L71.1%2086%20L71.6%2086.7%20L72%2087.5%20L72.5%2088.3%20L72.9%2089.1%20L73.3%2089.9%20L73.6%2090.7%20L74%2091.5%20L74.3%2092.3%20L74.6%2093.1%20L74.9%2093.9%20L75.1%2094.7%20L75.4%2095.5%20L75.6%2096.3%20L75.7%2097.2%20L75.9%2098%20L76%2098.8%20L76.1%2099.7%20L76.2%20100.5%20L76.2%20101.3%20L76.2%20102.2%20L76.2%20103%20L76.1%20103.8%20L79.5%20104.2%20L79.6%20103.2%20L79.6%20102.2%20L79.6%20101.3%20L79.6%20100.3%20L79.5%2099.3%20L79.4%2098.4%20L79.3%2097.4%20L79.1%2096.5%20L78.9%2095.6%20L78.7%2094.7%20L78.4%2093.7%20L78.1%2092.8%20L77.8%2091.9%20L77.5%2091%20L77.1%2090.2%20L76.7%2089.3%20L76.3%2088.4%20L75.9%2087.5%20L75.5%2086.7%20L75%2085.8%20L74.5%2085%20L74%2084.2%20L73.5%2083.3%20L72.9%2082.5%20L72.4%2081.7%20L71.8%2080.9%20L71.2%2080.1%20L70.6%2079.3%20L69.9%2078.5%20L69.3%2077.7%20L68.7%2076.9%20L68%2076.1%20L67.3%2075.3%20L66.6%2074.5%20L65.9%2073.7%20L65.2%2072.9%20L64.5%2072.1%20L63.8%2071.4%20L63%2070.6%20L62.3%2069.8%20L61.6%2069%20L60.8%2068.2%20L60%2067.4%20L59.3%2066.6%20L58.5%2065.7%20L57.7%2064.9%20L57%2064.1%20L56.2%2063.3%20L55.4%2062.4%20L54.6%2061.6%20L53.8%2060.7%20L53.1%2059.9%20L52.3%2059%20L51.5%2058.2%20L50.7%2057.3%20L50%2056.4%20L49.2%2055.5%20L48.4%2054.6%20L47.6%2053.7%20L46.9%2052.8%20L46.1%2051.9%20L45.4%2051%20L44.6%2050%20L43.9%2049.1%20L43.2%2048.2%20L42.4%2047.2%20L41.7%2046.3%20L41%2045.3%20L40.3%2044.3%20L39.6%2043.4%20L38.9%2042.4%20L38.3%2041.4%20L37.6%2040.4%20L37%2039.4%20L36.3%2038.5%20L35.7%2037.5%20L35.1%2036.5%20L34.5%2035.5%20L33.9%2034.5%20L33.3%2033.5%20L32.7%2032.5%20L32.2%2031.5%20L31.7%2030.5%20L31.1%2029.5%20L30.6%2028.5%20L30.1%2027.6%20L29.7%2026.6%20L29.2%2025.6%20L28.8%2024.6%20L28.3%2023.6%20L27.9%2022.7%20L27.5%2021.7%20L27.2%2020.7%20L26.8%2019.7%20L26.5%2018.8%20L26.1%2017.8%20L25.8%2016.9%20L25.6%2015.9%20L25.3%2015%20L25%2014.1%20L24.8%2013.1%20L24.6%2012.2%20L24.4%2011.3%20L24.2%2010.4%20L24.1%209.4%20L23.9%208.5%20L23.8%207.6%20L23.7%206.7%20L23.7%205.9%20L23.6%205%20L23.5%204.1%20L23.5%203.2%20L23.5%202.3%20L23.5%201.4%20L23.5%200.6%20L23.6%20-0.3%20L23.6%20-1.2%20L23.7%20-2%20L23.8%20-2.9%20L23.9%20-3.8%20Z%22/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:center top;
background-size:var(--celda) 100%;
}
.enredadera{
display:block;
grid-template-columns:none;
}
/* Aquí el tallo lo pone cada <li>, así que las dos capas de escritorio
—la serpentina y el remate— sobran. */
.enredadera::before, .enredadera::after{ display:none; }
.enredadera > li{
transform-origin:50% 0; /* aqui la hoja se agarra arriba del li */
display:flex; justify-content:center;
height:var(--celda);
/*@movil*/background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%2314170f%22%20stroke=%22%2314170f%22%20stroke-width=%22.5%22%20stroke-linejoin=%22round%22%20d=%22M75.1%20-3.7%20L75.2%20-2.9%20L75.2%20-2%20L75.3%20-1.2%20L75.3%20-0.4%20L75.3%200.5%20L75.3%201.3%20L75.2%202.1%20L75.2%203%20L75.1%203.8%20L75%204.6%20L74.9%205.5%20L74.7%206.3%20L74.5%207.1%20L74.4%208%20L74.1%208.8%20L73.9%209.7%20L73.7%2010.5%20L73.4%2011.4%20L73.1%2012.2%20L72.8%2013.1%20L72.5%2013.9%20L72.1%2014.8%20L71.8%2015.6%20L71.4%2016.5%20L71%2017.3%20L70.5%2018.2%20L70.1%2019%20L69.6%2019.9%20L69.2%2020.8%20L68.7%2021.6%20L68.2%2022.5%20L67.6%2023.4%20L67.1%2024.3%20L66.5%2025.1%20L65.9%2026%20L65.3%2026.9%20L64.7%2027.8%20L64.1%2028.6%20L63.5%2029.5%20L62.8%2030.4%20L62.2%2031.3%20L61.5%2032.2%20L60.8%2033%20L60.1%2033.9%20L59.4%2034.8%20L58.7%2035.7%20L58%2036.6%20L57.2%2037.5%20L56.5%2038.4%20L55.7%2039.3%20L55%2040.1%20L54.2%2041%20L53.5%2041.9%20L52.7%2042.8%20L51.9%2043.7%20L51.1%2044.6%20L50.3%2045.5%20L49.6%2046.4%20L48.8%2047.3%20L48%2048.2%20L47.2%2049.1%20L46.4%2050%20L45.6%2050.9%20L44.8%2051.8%20L44%2052.7%20L43.2%2053.6%20L42.4%2054.5%20L41.7%2055.4%20L40.9%2056.3%20L40.1%2057.3%20L39.4%2058.2%20L38.6%2059.1%20L37.9%2060%20L37.1%2060.9%20L36.4%2061.8%20L35.6%2062.7%20L34.9%2063.6%20L34.2%2064.6%20L33.5%2065.5%20L32.8%2066.4%20L32.2%2067.3%20L31.5%2068.2%20L30.8%2069.2%20L30.2%2070.1%20L29.6%2071%20L29%2071.9%20L28.4%2072.9%20L27.8%2073.8%20L27.2%2074.7%20L26.7%2075.6%20L26.1%2076.6%20L25.6%2077.5%20L25.1%2078.4%20L24.6%2079.4%20L24.2%2080.3%20L23.7%2081.3%20L23.3%2082.2%20L22.9%2083.2%20L22.5%2084.1%20L22.1%2085.1%20L21.8%2086%20L21.5%2087%20L21.2%2087.9%20L20.9%2088.9%20L20.6%2089.8%20L20.4%2090.8%20L20.2%2091.7%20L20%2092.7%20L19.8%2093.7%20L19.7%2094.6%20L19.5%2095.6%20L19.5%2096.6%20L19.4%2097.5%20L19.3%2098.5%20L19.3%2099.5%20L19.3%20100.4%20L19.3%20101.4%20L19.4%20102.4%20L19.4%20103.3%20L19.5%20104.3%20L24.9%20103.7%20L24.8%20102.9%20L24.8%20102%20L24.7%20101.2%20L24.7%20100.4%20L24.7%2099.5%20L24.7%2098.7%20L24.8%2097.9%20L24.8%2097%20L24.9%2096.2%20L25%2095.4%20L25.1%2094.5%20L25.3%2093.7%20L25.5%2092.9%20L25.6%2092%20L25.9%2091.2%20L26.1%2090.3%20L26.3%2089.5%20L26.6%2088.6%20L26.9%2087.8%20L27.2%2086.9%20L27.5%2086.1%20L27.9%2085.2%20L28.2%2084.4%20L28.6%2083.5%20L29%2082.7%20L29.5%2081.8%20L29.9%2081%20L30.4%2080.1%20L30.8%2079.2%20L31.3%2078.4%20L31.8%2077.5%20L32.4%2076.6%20L32.9%2075.7%20L33.5%2074.9%20L34.1%2074%20L34.7%2073.1%20L35.3%2072.2%20L35.9%2071.4%20L36.5%2070.5%20L37.2%2069.6%20L37.8%2068.7%20L38.5%2067.8%20L39.2%2067%20L39.9%2066.1%20L40.6%2065.2%20L41.3%2064.3%20L42%2063.4%20L42.8%2062.5%20L43.5%2061.6%20L44.3%2060.7%20L45%2059.9%20L45.8%2059%20L46.5%2058.1%20L47.3%2057.2%20L48.1%2056.3%20L48.9%2055.4%20L49.7%2054.5%20L50.4%2053.6%20L51.2%2052.7%20L52%2051.8%20L52.8%2050.9%20L53.6%2050%20L54.4%2049.1%20L55.2%2048.2%20L56%2047.3%20L56.8%2046.4%20L57.6%2045.5%20L58.3%2044.6%20L59.1%2043.7%20L59.9%2042.7%20L60.6%2041.8%20L61.4%2040.9%20L62.1%2040%20L62.9%2039.1%20L63.6%2038.2%20L64.4%2037.3%20L65.1%2036.4%20L65.8%2035.4%20L66.5%2034.5%20L67.2%2033.6%20L67.8%2032.7%20L68.5%2031.8%20L69.2%2030.8%20L69.8%2029.9%20L70.4%2029%20L71%2028.1%20L71.6%2027.1%20L72.2%2026.2%20L72.8%2025.3%20L73.3%2024.4%20L73.9%2023.4%20L74.4%2022.5%20L74.9%2021.6%20L75.4%2020.6%20L75.8%2019.7%20L76.3%2018.7%20L76.7%2017.8%20L77.1%2016.8%20L77.5%2015.9%20L77.9%2014.9%20L78.2%2014%20L78.5%2013%20L78.8%2012.1%20L79.1%2011.1%20L79.4%2010.2%20L79.6%209.2%20L79.8%208.3%20L80%207.3%20L80.2%206.3%20L80.3%205.4%20L80.5%204.4%20L80.5%203.4%20L80.6%202.5%20L80.7%201.5%20L80.7%200.5%20L80.7%20-0.4%20L80.7%20-1.4%20L80.6%20-2.4%20L80.6%20-3.3%20L80.5%20-4.3%20Z%22/%3E%3Cpath%20fill=%22%23ff00aa%22%20stroke=%22%23ff00aa%22%20stroke-width=%22.4%22%20stroke-linejoin=%22round%22%20d=%22M76.1%20-3.9%20L76.2%20-3%20L76.2%20-2.1%20L76.2%20-1.3%20L76.2%20-0.5%20L76.1%200.4%20L76.1%201.2%20L76%202.1%20L75.9%202.9%20L75.7%203.7%20L75.5%204.6%20L75.3%205.4%20L75.1%206.2%20L74.9%207.1%20L74.6%207.9%20L74.3%208.7%20L74%209.5%20L73.7%2010.3%20L73.3%2011.1%20L72.9%2011.9%20L72.5%2012.7%20L72.1%2013.6%20L71.7%2014.3%20L71.2%2015.1%20L70.7%2015.9%20L70.2%2016.7%20L69.7%2017.5%20L69.2%2018.3%20L68.6%2019.1%20L68%2019.9%20L67.4%2020.7%20L66.8%2021.4%20L66.2%2022.2%20L65.5%2023%20L64.9%2023.8%20L64.2%2024.6%20L63.5%2025.3%20L62.8%2026.1%20L62.1%2026.9%20L61.3%2027.7%20L60.6%2028.5%20L59.8%2029.3%20L59.1%2030%20L58.3%2030.8%20L57.5%2031.6%20L56.7%2032.4%20L55.9%2033.2%20L55.1%2034%20L54.3%2034.8%20L53.5%2035.6%20L52.7%2036.4%20L51.8%2037.3%20L51%2038.1%20L50.2%2038.9%20L49.3%2039.8%20L48.5%2040.6%20L47.7%2041.5%20L46.8%2042.3%20L46%2043.2%20L45.2%2044.1%20L44.3%2044.9%20L43.5%2045.8%20L42.7%2046.7%20L41.9%2047.6%20L41.1%2048.6%20L40.3%2049.5%20L39.5%2050.4%20L38.7%2051.3%20L37.9%2052.3%20L37.2%2053.2%20L36.4%2054.2%20L35.7%2055.2%20L34.9%2056.2%20L34.2%2057.1%20L33.5%2058.1%20L32.8%2059.1%20L32.1%2060.1%20L31.5%2061.1%20L30.8%2062.2%20L30.2%2063.2%20L29.6%2064.2%20L29%2065.2%20L28.4%2066.3%20L27.8%2067.3%20L27.3%2068.3%20L26.8%2069.4%20L26.3%2070.4%20L25.8%2071.5%20L25.3%2072.5%20L24.8%2073.6%20L24.4%2074.6%20L24%2075.7%20L23.6%2076.7%20L23.2%2077.7%20L22.9%2078.8%20L22.5%2079.8%20L22.2%2080.9%20L21.9%2081.9%20L21.7%2082.9%20L21.4%2083.9%20L21.2%2085%20L21%2086%20L20.8%2087%20L20.6%2088%20L20.5%2089%20L20.3%2090%20L20.2%2091%20L20.2%2092%20L20.1%2092.9%20L20%2093.9%20L20%2094.9%20L20%2095.8%20L20%2096.8%20L20%2097.7%20L20.1%2098.7%20L20.1%2099.6%20L20.2%20100.5%20L20.3%20101.5%20L20.4%20102.4%20L20.4%20103.3%20L20.5%20104.2%20L23.9%20103.8%20L23.8%20102.9%20L23.7%20102%20L23.6%20101.1%20L23.6%20100.3%20L23.5%2099.4%20L23.5%2098.5%20L23.4%2097.6%20L23.4%2096.7%20L23.4%2095.8%20L23.4%2094.9%20L23.4%2094%20L23.5%2093.1%20L23.5%2092.2%20L23.6%2091.3%20L23.7%2090.4%20L23.8%2089.5%20L24%2088.5%20L24.1%2087.6%20L24.3%2086.6%20L24.5%2085.7%20L24.7%2084.7%20L25%2083.7%20L25.2%2082.8%20L25.5%2081.8%20L25.8%2080.8%20L26.1%2079.8%20L26.4%2078.9%20L26.8%2077.9%20L27.2%2076.9%20L27.6%2075.9%20L28%2074.9%20L28.4%2073.9%20L28.9%2072.9%20L29.3%2071.9%20L29.8%2070.9%20L30.3%2069.9%20L30.8%2068.9%20L31.4%2067.9%20L31.9%2066.9%20L32.5%2065.9%20L33.1%2064.9%20L33.7%2064%20L34.3%2063%20L35%2062%20L35.6%2061%20L36.3%2060.1%20L37%2059.1%20L37.7%2058.2%20L38.4%2057.2%20L39.1%2056.3%20L39.8%2055.4%20L40.6%2054.4%20L41.3%2053.5%20L42.1%2052.6%20L42.9%2051.7%20L43.6%2050.8%20L44.4%2049.9%20L45.2%2049%20L46%2048.1%20L46.8%2047.3%20L47.6%2046.4%20L48.4%2045.5%20L49.3%2044.7%20L50.1%2043.8%20L50.9%2043%20L51.7%2042.2%20L52.6%2041.3%20L53.4%2040.5%20L54.2%2039.7%20L55%2038.9%20L55.9%2038.1%20L56.7%2037.2%20L57.5%2036.4%20L58.3%2035.6%20L59.1%2034.8%20L59.9%2034%20L60.7%2033.2%20L61.5%2032.4%20L62.3%2031.6%20L63.1%2030.8%20L63.8%2030%20L64.6%2029.2%20L65.3%2028.4%20L66%2027.6%20L66.8%2026.8%20L67.5%2026%20L68.1%2025.2%20L68.8%2024.4%20L69.5%2023.6%20L70.1%2022.7%20L70.7%2021.9%20L71.4%2021.1%20L72%2020.3%20L72.5%2019.4%20L73.1%2018.6%20L73.6%2017.7%20L74.1%2016.9%20L74.6%2016%20L75.1%2015.2%20L75.6%2014.3%20L76%2013.4%20L76.4%2012.5%20L76.8%2011.7%20L77.2%2010.8%20L77.5%209.9%20L77.8%209%20L78.1%208.1%20L78.4%207.1%20L78.6%206.2%20L78.9%205.3%20L79.1%204.4%20L79.2%203.4%20L79.4%202.5%20L79.5%201.6%20L79.5%200.6%20L79.6%20-0.3%20L79.6%20-1.3%20L79.6%20-2.2%20L79.6%20-3.2%20L79.5%20-4.1%20Z%22/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:center top;
background-size:var(--celda) 100%;
}
.hoja{
--centrar:0%;
position:static; left:auto; top:auto;
width:calc(var(--ancho-hoja) * var(--tam,1));
}
.enredadera > li:nth-child(odd) .hoja{ --giro:248deg; }
.enredadera > li:nth-child(even) .hoja{ --giro:112deg; }
/* La onda pone el tallo en su extremo justo al principio de cada celda, que
es donde se agarra la hoja: hay que llevarla ahí o quedaría colgando del
aire. 0.28 es la amplitud del dibujo (AM/100) y la tira mide una celda.
Va con ">" para no alcanzar a los brotes, que cuelgan dentro del mismo li
y llevan su propio --centrar. */
.enredadera > li:nth-child(odd) > .hoja{ --centrar:calc(var(--celda) * .28); }
.enredadera > li:nth-child(even) > .hoja{ --centrar:calc(var(--celda) * -.28); }
/* Las pares llevan el dibujo espejo, para que la onda siga de celda en celda */
.enredadera > li:nth-child(even){
/*@movil2*/background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%2314170f%22%20stroke=%22%2314170f%22%20stroke-width=%22.5%22%20stroke-linejoin=%22round%22%20d=%22M19.5%20-4.3%20L19.4%20-3.3%20L19.4%20-2.4%20L19.3%20-1.4%20L19.3%20-0.4%20L19.3%200.5%20L19.3%201.5%20L19.4%202.5%20L19.5%203.4%20L19.5%204.4%20L19.7%205.4%20L19.8%206.3%20L20%207.3%20L20.2%208.3%20L20.4%209.2%20L20.6%2010.2%20L20.9%2011.1%20L21.2%2012.1%20L21.5%2013%20L21.8%2014%20L22.1%2014.9%20L22.5%2015.9%20L22.9%2016.8%20L23.3%2017.8%20L23.7%2018.7%20L24.2%2019.7%20L24.6%2020.6%20L25.1%2021.6%20L25.6%2022.5%20L26.1%2023.4%20L26.7%2024.4%20L27.2%2025.3%20L27.8%2026.2%20L28.4%2027.1%20L29%2028.1%20L29.6%2029%20L30.2%2029.9%20L30.8%2030.8%20L31.5%2031.8%20L32.2%2032.7%20L32.8%2033.6%20L33.5%2034.5%20L34.2%2035.4%20L34.9%2036.4%20L35.6%2037.3%20L36.4%2038.2%20L37.1%2039.1%20L37.9%2040%20L38.6%2040.9%20L39.4%2041.8%20L40.1%2042.7%20L40.9%2043.7%20L41.7%2044.6%20L42.4%2045.5%20L43.2%2046.4%20L44%2047.3%20L44.8%2048.2%20L45.6%2049.1%20L46.4%2050%20L47.2%2050.9%20L48%2051.8%20L48.8%2052.7%20L49.6%2053.6%20L50.3%2054.5%20L51.1%2055.4%20L51.9%2056.3%20L52.7%2057.2%20L53.5%2058.1%20L54.2%2059%20L55%2059.9%20L55.7%2060.7%20L56.5%2061.6%20L57.2%2062.5%20L58%2063.4%20L58.7%2064.3%20L59.4%2065.2%20L60.1%2066.1%20L60.8%2067%20L61.5%2067.8%20L62.2%2068.7%20L62.8%2069.6%20L63.5%2070.5%20L64.1%2071.4%20L64.7%2072.2%20L65.3%2073.1%20L65.9%2074%20L66.5%2074.9%20L67.1%2075.7%20L67.6%2076.6%20L68.2%2077.5%20L68.7%2078.4%20L69.2%2079.2%20L69.6%2080.1%20L70.1%2081%20L70.5%2081.8%20L71%2082.7%20L71.4%2083.5%20L71.8%2084.4%20L72.1%2085.2%20L72.5%2086.1%20L72.8%2086.9%20L73.1%2087.8%20L73.4%2088.6%20L73.7%2089.5%20L73.9%2090.3%20L74.1%2091.2%20L74.4%2092%20L74.5%2092.9%20L74.7%2093.7%20L74.9%2094.5%20L75%2095.4%20L75.1%2096.2%20L75.2%2097%20L75.2%2097.9%20L75.3%2098.7%20L75.3%2099.5%20L75.3%20100.4%20L75.3%20101.2%20L75.2%20102%20L75.2%20102.9%20L75.1%20103.7%20L80.5%20104.3%20L80.6%20103.3%20L80.6%20102.4%20L80.7%20101.4%20L80.7%20100.4%20L80.7%2099.5%20L80.7%2098.5%20L80.6%2097.5%20L80.5%2096.6%20L80.5%2095.6%20L80.3%2094.6%20L80.2%2093.7%20L80%2092.7%20L79.8%2091.7%20L79.6%2090.8%20L79.4%2089.8%20L79.1%2088.9%20L78.8%2087.9%20L78.5%2087%20L78.2%2086%20L77.9%2085.1%20L77.5%2084.1%20L77.1%2083.2%20L76.7%2082.2%20L76.3%2081.3%20L75.8%2080.3%20L75.4%2079.4%20L74.9%2078.4%20L74.4%2077.5%20L73.9%2076.6%20L73.3%2075.6%20L72.8%2074.7%20L72.2%2073.8%20L71.6%2072.9%20L71%2071.9%20L70.4%2071%20L69.8%2070.1%20L69.2%2069.2%20L68.5%2068.2%20L67.8%2067.3%20L67.2%2066.4%20L66.5%2065.5%20L65.8%2064.6%20L65.1%2063.6%20L64.4%2062.7%20L63.6%2061.8%20L62.9%2060.9%20L62.1%2060%20L61.4%2059.1%20L60.6%2058.2%20L59.9%2057.3%20L59.1%2056.3%20L58.3%2055.4%20L57.6%2054.5%20L56.8%2053.6%20L56%2052.7%20L55.2%2051.8%20L54.4%2050.9%20L53.6%2050%20L52.8%2049.1%20L52%2048.2%20L51.2%2047.3%20L50.4%2046.4%20L49.7%2045.5%20L48.9%2044.6%20L48.1%2043.7%20L47.3%2042.8%20L46.5%2041.9%20L45.8%2041%20L45%2040.1%20L44.3%2039.3%20L43.5%2038.4%20L42.8%2037.5%20L42%2036.6%20L41.3%2035.7%20L40.6%2034.8%20L39.9%2033.9%20L39.2%2033%20L38.5%2032.2%20L37.8%2031.3%20L37.2%2030.4%20L36.5%2029.5%20L35.9%2028.6%20L35.3%2027.8%20L34.7%2026.9%20L34.1%2026%20L33.5%2025.1%20L32.9%2024.3%20L32.4%2023.4%20L31.8%2022.5%20L31.3%2021.6%20L30.8%2020.8%20L30.4%2019.9%20L29.9%2019%20L29.5%2018.2%20L29%2017.3%20L28.6%2016.5%20L28.2%2015.6%20L27.9%2014.8%20L27.5%2013.9%20L27.2%2013.1%20L26.9%2012.2%20L26.6%2011.4%20L26.3%2010.5%20L26.1%209.7%20L25.9%208.8%20L25.6%208%20L25.5%207.1%20L25.3%206.3%20L25.1%205.5%20L25%204.6%20L24.9%203.8%20L24.8%203%20L24.8%202.1%20L24.7%201.3%20L24.7%200.5%20L24.7%20-0.4%20L24.7%20-1.2%20L24.8%20-2%20L24.8%20-2.9%20L24.9%20-3.7%20Z%22/%3E%3Cpath%20fill=%22%23ff00aa%22%20stroke=%22%23ff00aa%22%20stroke-width=%22.4%22%20stroke-linejoin=%22round%22%20d=%22M20.5%20-4.2%20L20.4%20-3.3%20L20.3%20-2.4%20L20.3%20-1.4%20L20.2%20-0.5%20L20.2%200.4%20L20.1%201.4%20L20.1%202.3%20L20.1%203.3%20L20.1%204.2%20L20.2%205.2%20L20.3%206.1%20L20.3%207.1%20L20.5%208%20L20.6%209%20L20.7%2010%20L20.9%2011%20L21.1%2011.9%20L21.3%2012.9%20L21.5%2013.9%20L21.7%2014.9%20L22%2015.9%20L22.3%2016.9%20L22.6%2017.9%20L22.9%2018.9%20L23.2%2019.9%20L23.6%2020.9%20L24%2021.9%20L24.4%2022.9%20L24.8%2023.9%20L25.2%2025%20L25.6%2026%20L26.1%2027%20L26.6%2028%20L27.1%2029.1%20L27.6%2030.1%20L28.1%2031.1%20L28.6%2032.1%20L29.2%2033.2%20L29.8%2034.2%20L30.4%2035.2%20L30.9%2036.2%20L31.6%2037.2%20L32.2%2038.3%20L32.8%2039.3%20L33.5%2040.3%20L34.1%2041.3%20L34.8%2042.3%20L35.5%2043.3%20L36.1%2044.3%20L36.8%2045.3%20L37.5%2046.3%20L38.3%2047.3%20L39%2048.3%20L39.7%2049.3%20L40.5%2050.2%20L41.2%2051.2%20L42%2052.2%20L42.7%2053.1%20L43.5%2054%20L44.3%2055%20L45%2055.9%20L45.8%2056.8%20L46.6%2057.7%20L47.4%2058.6%20L48.2%2059.5%20L49%2060.4%20L49.8%2061.3%20L50.5%2062.2%20L51.3%2063%20L52.1%2063.9%20L52.9%2064.8%20L53.7%2065.6%20L54.5%2066.4%20L55.3%2067.3%20L56%2068.1%20L56.8%2068.9%20L57.6%2069.7%20L58.3%2070.5%20L59.1%2071.3%20L59.8%2072.1%20L60.5%2072.9%20L61.3%2073.7%20L62%2074.4%20L62.7%2075.2%20L63.4%2076%20L64.1%2076.8%20L64.7%2077.5%20L65.4%2078.3%20L66%2079.1%20L66.7%2079.8%20L67.3%2080.6%20L67.9%2081.4%20L68.5%2082.1%20L69%2082.9%20L69.6%2083.7%20L70.1%2084.4%20L70.6%2085.2%20L71.1%2086%20L71.6%2086.7%20L72%2087.5%20L72.5%2088.3%20L72.9%2089.1%20L73.3%2089.9%20L73.6%2090.7%20L74%2091.5%20L74.3%2092.3%20L74.6%2093.1%20L74.9%2093.9%20L75.1%2094.7%20L75.4%2095.5%20L75.6%2096.3%20L75.7%2097.2%20L75.9%2098%20L76%2098.8%20L76.1%2099.7%20L76.2%20100.5%20L76.2%20101.3%20L76.2%20102.2%20L76.2%20103%20L76.1%20103.8%20L79.5%20104.2%20L79.6%20103.2%20L79.6%20102.2%20L79.6%20101.3%20L79.6%20100.3%20L79.5%2099.3%20L79.4%2098.4%20L79.3%2097.4%20L79.1%2096.5%20L78.9%2095.6%20L78.7%2094.7%20L78.4%2093.7%20L78.1%2092.8%20L77.8%2091.9%20L77.5%2091%20L77.1%2090.2%20L76.7%2089.3%20L76.3%2088.4%20L75.9%2087.5%20L75.5%2086.7%20L75%2085.8%20L74.5%2085%20L74%2084.2%20L73.5%2083.3%20L72.9%2082.5%20L72.4%2081.7%20L71.8%2080.9%20L71.2%2080.1%20L70.6%2079.3%20L69.9%2078.5%20L69.3%2077.7%20L68.7%2076.9%20L68%2076.1%20L67.3%2075.3%20L66.6%2074.5%20L65.9%2073.7%20L65.2%2072.9%20L64.5%2072.1%20L63.8%2071.4%20L63%2070.6%20L62.3%2069.8%20L61.6%2069%20L60.8%2068.2%20L60%2067.4%20L59.3%2066.6%20L58.5%2065.7%20L57.7%2064.9%20L57%2064.1%20L56.2%2063.3%20L55.4%2062.4%20L54.6%2061.6%20L53.8%2060.7%20L53.1%2059.9%20L52.3%2059%20L51.5%2058.2%20L50.7%2057.3%20L50%2056.4%20L49.2%2055.5%20L48.4%2054.6%20L47.6%2053.7%20L46.9%2052.8%20L46.1%2051.9%20L45.4%2051%20L44.6%2050%20L43.9%2049.1%20L43.2%2048.2%20L42.4%2047.2%20L41.7%2046.3%20L41%2045.3%20L40.3%2044.3%20L39.6%2043.4%20L38.9%2042.4%20L38.3%2041.4%20L37.6%2040.4%20L37%2039.4%20L36.3%2038.5%20L35.7%2037.5%20L35.1%2036.5%20L34.5%2035.5%20L33.9%2034.5%20L33.3%2033.5%20L32.7%2032.5%20L32.2%2031.5%20L31.7%2030.5%20L31.1%2029.5%20L30.6%2028.5%20L30.1%2027.6%20L29.7%2026.6%20L29.2%2025.6%20L28.8%2024.6%20L28.3%2023.6%20L27.9%2022.7%20L27.5%2021.7%20L27.2%2020.7%20L26.8%2019.7%20L26.5%2018.8%20L26.1%2017.8%20L25.8%2016.9%20L25.6%2015.9%20L25.3%2015%20L25%2014.1%20L24.8%2013.1%20L24.6%2012.2%20L24.4%2011.3%20L24.2%2010.4%20L24.1%209.4%20L23.9%208.5%20L23.8%207.6%20L23.7%206.7%20L23.7%205.9%20L23.6%205%20L23.5%204.1%20L23.5%203.2%20L23.5%202.3%20L23.5%201.4%20L23.5%200.6%20L23.6%20-0.3%20L23.6%20-1.2%20L23.7%20-2%20L23.8%20-2.9%20L23.9%20-3.8%20Z%22/%3E%3C/svg%3E");
}
/* Y la última remata en espiral en vez de cortarse contra el borde de abajo,
que es justo lo que se acababa de arreglar en la otra punta */
.enredadera > li:last-child{
/*@movil3*/background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%2314170f%22%20stroke=%22%2314170f%22%20stroke-width=%22.5%22%20stroke-linejoin=%22round%22%20d=%22M19.5%20-4.3%20L19.5%20-3.6%20L19.4%20-2.8%20L19.4%20-2.1%20L19.3%20-1.3%20L19.3%20-0.6%20L19.3%200.1%20L19.3%200.9%20L19.3%201.6%20L19.4%202.4%20L19.4%203.1%20L19.5%203.8%20L19.6%204.6%20L19.7%205.3%20L19.8%206.1%20L19.9%206.8%20L20%207.5%20L20.2%208.3%20L20.3%209%20L20.5%209.7%20L20.7%2010.5%20L20.9%2011.2%20L21.1%2011.9%20L21.3%2012.7%20L21.6%2013.4%20L21.8%2014.1%20L22.1%2014.9%20L22.4%2015.6%20L22.7%2016.3%20L23%2017%20L23.3%2017.8%20L23.6%2018.5%20L23.9%2019.2%20L24.3%2019.9%20L24.6%2020.6%20L25%2021.4%20L25.4%2022.1%20L25.8%2022.8%20L26.2%2023.5%20L26.6%2024.2%20L27%2024.9%20L27.4%2025.6%20L27.9%2026.4%20L28.3%2027.1%20L28.8%2027.8%20L29.2%2028.5%20L29.7%2029.2%20L30.2%2029.9%20L30.7%2030.6%20L31.3%2031.2%20L31.8%2031.9%20L32.3%2032.6%20L32.9%2033.3%20L33.4%2034%20L34%2034.7%20L34.5%2035.3%20L35.1%2036%20L35.7%2036.7%20L36.3%2037.4%20L36.8%2038.1%20L37.4%2038.7%20L38%2039.4%20L38.6%2040.1%20L39.2%2040.8%20L39.8%2041.4%20L40.4%2042.1%20L41%2042.8%20L41.7%2043.4%20L42.3%2044.1%20L42.9%2044.8%20L43.5%2045.5%20L44.1%2046.1%20L44.8%2046.8%20L45.4%2047.5%20L46%2048.1%20L46.7%2048.8%20L47.3%2049.5%20L47.9%2050.1%20L48.5%2050.8%20L49.2%2051.5%20L49.8%2052.1%20L50.4%2052.8%20L51.1%2053.5%20L51.7%2054.1%20L52.3%2054.8%20L53%2055.5%20L53.6%2056.1%20L54.2%2056.8%20L54.8%2057.5%20L55.4%2058.1%20L56%2058.8%20L57.9%2057.2%20L57.3%2056.5%20L56.8%2055.8%20L56.2%2055.1%20L55.6%2054.4%20L55%2053.6%20L54.5%2052.9%20L53.9%2052.2%20L53.3%2051.5%20L52.7%2050.8%20L52.1%2050.1%20L51.6%2049.4%20L51%2048.7%20L50.4%2048%20L49.8%2047.2%20L49.2%2046.5%20L48.7%2045.8%20L48.1%2045.1%20L47.5%2044.4%20L46.9%2043.7%20L46.4%2043%20L45.8%2042.3%20L45.2%2041.6%20L44.7%2040.9%20L44.1%2040.2%20L43.6%2039.5%20L43%2038.7%20L42.5%2038%20L41.9%2037.3%20L41.4%2036.6%20L40.9%2035.9%20L40.4%2035.2%20L39.8%2034.5%20L39.3%2033.8%20L38.8%2033.1%20L38.3%2032.4%20L37.8%2031.7%20L37.3%2031%20L36.9%2030.3%20L36.4%2029.7%20L35.9%2029%20L35.5%2028.3%20L35%2027.6%20L34.6%2026.9%20L34.2%2026.2%20L33.7%2025.5%20L33.3%2024.8%20L32.9%2024.2%20L32.5%2023.5%20L32%2022.8%20L31.6%2022.2%20L31.3%2021.5%20L30.9%2020.9%20L30.5%2020.2%20L30.1%2019.5%20L29.8%2018.9%20L29.5%2018.2%20L29.1%2017.5%20L28.8%2016.9%20L28.5%2016.2%20L28.2%2015.6%20L27.9%2014.9%20L27.7%2014.3%20L27.4%2013.6%20L27.2%2013%20L26.9%2012.3%20L26.7%2011.7%20L26.5%2011%20L26.3%2010.4%20L26.1%209.7%20L25.9%209.1%20L25.8%208.4%20L25.6%207.8%20L25.5%207.2%20L25.3%206.5%20L25.2%205.9%20L25.1%205.2%20L25%204.6%20L24.9%204%20L24.9%203.3%20L24.8%202.7%20L24.8%202%20L24.7%201.4%20L24.7%200.8%20L24.7%200.1%20L24.7%20-0.5%20L24.7%20-1.2%20L24.7%20-1.8%20L24.8%20-2.4%20L24.8%20-3.1%20L24.9%20-3.7%20Z%22/%3E%3Cpath%20fill=%22%2300d18e%22%20d=%22M55.9%2058.5%20L56.4%2059.5%20L56.7%2060.5%20L57%2061.5%20L57.2%2062.5%20L57.3%2063.5%20L57.4%2064.5%20L57.3%2065.5%20L57.2%2066.4%20L57.1%2067.3%20L56.8%2068.2%20L56.5%2069%20L56.2%2069.8%20L55.8%2070.6%20L55.3%2071.3%20L54.8%2071.9%20L54.3%2072.5%20L53.8%2073.1%20L53.2%2073.5%20L52.6%2074%20L51.9%2074.4%20L51.3%2074.7%20L50.6%2074.9%20L50%2075.1%20L49.3%2075.3%20L48.7%2075.4%20L48%2075.4%20L47.4%2075.4%20L46.8%2075.4%20L46.2%2075.3%20L45.6%2075.2%20L45%2075%20L44.5%2074.8%20L44%2074.5%20L43.6%2074.2%20L43.1%2073.9%20L42.7%2073.6%20L42.4%2073.2%20L42%2072.9%20L41.7%2072.5%20L41.5%2072.1%20L41.3%2071.7%20L41.1%2071.2%20L40.9%2070.8%20L40.8%2070.4%20L40.7%2070%20L40.7%2069.5%20L40.7%2069.1%20L40.7%2068.7%20L40.7%2068.3%20L40.8%2068%20L40.9%2067.6%20L41.1%2067.3%20L41.2%2066.9%20L41.4%2066.6%20L41.6%2066.3%20L41.8%2066.1%20L42%2065.8%20L42.2%2065.6%20L42.5%2065.4%20L42.7%2065.2%20L43%2065.1%20L43.3%2064.9%20L43.5%2064.8%20L43.8%2064.7%20L44.1%2064.7%20L44.4%2064.6%20L44.6%2064.6%20L44.9%2064.6%20L45.1%2064.7%20L45.4%2064.7%20L45.6%2064.8%20L45.9%2064.8%20L46.1%2064.9%20L46.3%2065%20L46.5%2065.2%20L46.7%2065.3%20L46.8%2065.4%20L47%2065.6%20L47.1%2065.7%20L47.2%2065.9%20L47.3%2066.1%20L47.4%2066.2%20L47.5%2066.4%20L47.5%2066.6%20L47.6%2066.7%20L47.6%2066.9%20L47.6%2067.1%20L47.6%2067.3%20L47.6%2067.4%20L47.6%2067.6%20L47.6%2067.7%20L47.5%2067.9%20L47.5%2068%20L47.4%2068.2%20L47.4%2068.3%20L47.3%2068.4%20L47.2%2068.5%20L47.1%2068.6%20L47%2068.7%20L46.9%2068.8%20L46.8%2068.9%20L46.7%2068.9%20L46.6%2069%20L46.5%2069%20L46.3%2069.1%20L46.2%2069.1%20L46.1%2069.1%20L46%2069.1%20L45.9%2069.1%20L45.8%2069.1%20L45.7%2069.7%20L45.8%2069.7%20L46%2069.7%20L46.2%2069.7%20L46.3%2069.7%20L46.5%2069.7%20L46.6%2069.7%20L46.8%2069.6%20L47%2069.6%20L47.1%2069.5%20L47.3%2069.4%20L47.4%2069.3%20L47.6%2069.2%20L47.7%2069%20L47.9%2068.9%20L48%2068.7%20L48.1%2068.5%20L48.2%2068.4%20L48.3%2068.2%20L48.4%2068%20L48.4%2067.8%20L48.5%2067.5%20L48.5%2067.3%20L48.5%2067.1%20L48.5%2066.8%20L48.4%2066.6%20L48.4%2066.3%20L48.3%2066.1%20L48.2%2065.9%20L48.1%2065.6%20L48%2065.4%20L47.8%2065.2%20L47.7%2064.9%20L47.5%2064.7%20L47.3%2064.5%20L47%2064.4%20L46.8%2064.2%20L46.5%2064%20L46.2%2063.9%20L45.9%2063.8%20L45.6%2063.7%20L45.3%2063.6%20L45%2063.6%20L44.6%2063.6%20L44.3%2063.6%20L43.9%2063.6%20L43.6%2063.7%20L43.2%2063.8%20L42.8%2063.9%20L42.5%2064%20L42.1%2064.2%20L41.8%2064.4%20L41.5%2064.7%20L41.2%2064.9%20L40.9%2065.3%20L40.6%2065.6%20L40.3%2065.9%20L40.1%2066.3%20L39.9%2066.7%20L39.7%2067.2%20L39.6%2067.6%20L39.4%2068.1%20L39.4%2068.6%20L39.3%2069.1%20L39.3%2069.6%20L39.4%2070.1%20L39.4%2070.7%20L39.6%2071.2%20L39.7%2071.7%20L39.9%2072.3%20L40.2%2072.8%20L40.5%2073.3%20L40.8%2073.8%20L41.2%2074.3%20L41.7%2074.7%20L42.2%2075.1%20L42.7%2075.5%20L43.2%2075.9%20L43.8%2076.2%20L44.5%2076.5%20L45.1%2076.7%20L45.8%2076.9%20L46.6%2077.1%20L47.3%2077.1%20L48.1%2077.2%20L48.8%2077.1%20L49.6%2077%20L50.4%2076.9%20L51.2%2076.6%20L52%2076.4%20L52.8%2076%20L53.5%2075.6%20L54.3%2075.1%20L55%2074.5%20L55.7%2073.9%20L56.3%2073.2%20L57%2072.4%20L57.5%2071.6%20L58%2070.8%20L58.4%2069.8%20L58.8%2068.8%20L59.1%2067.8%20L59.4%2066.8%20L59.5%2065.7%20L59.6%2064.5%20L59.6%2063.4%20L59.4%2062.2%20L59.2%2061%20L58.9%2059.8%20L58.5%2058.7%20L58%2057.5%20Z%22/%3E%3C/svg%3E");
}
.brotes{ left:50%; }
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms!important; animation-iteration-count:1!important;
/* También el retardo. Sin esto la entrada escalonada dejaba las hojas
invisibles hasta 0.3s y luego aparecían de golpe, que es peor que la
animación que se quería evitar. */
animation-delay:0s!important;
transition-duration:.01ms!important; scroll-behavior:auto!important;
}
.hoja:hover,.hoja:focus-visible{ transform:translate(var(--centrar,-50%), var(--colgar,0%)) rotate(var(--giro)); }
.sb-toggle:hover,.ficha-cerrar:hover{ transform:none; }
}
@media print{
.sb-toggle,.sb-overlay,.sidebar,.volver,.cal-controls{ display:none!important; }
body{ background:#fff; }
body::before{ display:none; }
}
/* Zarcillo: una hoja de cada tres lo saca, para que la enredadera no parezca
sellada con plantilla. La variable atraviesa el shadow DOM del <use>. */
.enredadera > li:nth-child(3n) .hoja{ --zarcillo:1; }
/* ===================== LAS REDES QUE BROTAN =====================
La hoja REDES es un <label> de un checkbox escondido. Al marcarlo brotan
tres hojas pequeñas, cada una a su red, escalonadas para que parezca que
crecen. Sin JavaScript. Se cierra volviendo a pulsar la hoja. */
.li-redes{ position:relative; }
.brotes{
--r:calc(var(--fila) * .27);
/* El ancho de la hoja pequeña. Se mide contra las DOS dimensiones, como las
hojas de móvil: sólo con vw, en una pantalla baja —1280x720— los tres
brotes y sus etiquetas no caben en el hueco que deja la enredadera y se
pisaban entre ellos. */
--brote:calc(clamp(78px, min(7.6vw, 12vh), 128px) * .80);
position:absolute; left:50%;
top:calc(var(--y,50) / 100 * var(--fila));
width:0; height:0; margin:0; padding:0; list-style:none;
z-index:6; pointer-events:none;
}
.brotes > li{
position:absolute; left:0; top:0;
opacity:0;
/* Lo que se coloca es la PUNTA DEL RABILLO, o sea el centro de arriba de la
caja: por eso translate(-50%,0) y no (-50%,-50%). Antes se colocaba el
centro de la hoja, y así el punto donde empieza el tallo del brote
dependía de lo que midiera la hoja —que va en vw— y no se podía dibujar
ese tallo con un ángulo fijo. */
transform:translate(-50%,0) scale(.16);
transition:opacity .3s ease, transform .5s cubic-bezier(.22,1.25,.4,1);
}
/* EL TALLO DEL BROTE. Antes los tres brotes salían flotando: el rabillo de la
hoja pequeña mide lo que mide y no llegaba ni de lejos al tallo gordo, así
que parecían tres hojas sueltas en el aire debajo de REDES. Ahora cada una
lleva su tallo hasta el punto exacto del que brota.
Va en el <li>, que NO gira, así que --ang es un ángulo absoluto: la
dirección de vuelta al agarre. Las dos cifras salen de las mismas que
colocan el brote —si se mueve uno, se recalculan las dos— y como el <li>
entero se encoge a .16 cuando el brote está cerrado, el tallo se recoge con
él sin una regla más. */
.brotes > li::before{
content:"";
position:absolute; left:50%; top:0;
width:calc(var(--brote) * .032); /* el mismo grosor que el rabillo */
height:calc(var(--r) * var(--largo,0));
border-radius:99px;
background:var(--negro);
transform-origin:50% 0;
transform:translateX(-50%) rotate(var(--ang,0deg));
}
/* OJO con --tam aqui. El brote es descendiente de su <li>, asi que la regla
".enredadera > li:nth-child(12n+4) .hoja" (0,3,1) le gana a ".hoja-brote"
(0,1,0) y le mete el --tam de la hoja madre. Poner "--tam:.44" aqui no
servia de nada: el brote salia con el 0.92 de REDES, al doble de tamano, y
por eso se comia a las hojas vecinas. La medida va sin --tam. */
.hoja-brote{
--centrar:0%;
position:static; left:auto; top:auto;
width:var(--brote);
}
/* Los nombres de las redes son de una palabra: nunca deben partirse. Sin
esto, a 320 y 360 de verdad salia "MASTODO / N". Que el texto sobresalga
un poco del limbo no molesta, porque el calado lo separa del dibujo. */
.hoja-brote .hoja-txt{
white-space:nowrap;
/* Más pequeña que la de una hoja grande: son tres nombres largos en el
hueco que deja una sola hoja, y con la letra de las demás se tocaban
entre ellos. Sigue en versalitas de palo seco sobre el calado, así que
se lee igual de lejos. */
font-size:clamp(.68rem,.5rem + .5vw,1.05rem);
}
.brotes > li:nth-child(1) .hoja{ --giro:-26deg; }
.brotes > li:nth-child(2) .hoja{ --giro:0deg; }
.brotes > li:nth-child(3) .hoja{ --giro:26deg; }
/* Largo y ángulo del tallo de cada uno: son el vector de vuelta al agarre,
o sea lo mismo que el desplazamiento de más abajo leído del revés. */
.brotes > li:nth-child(1){ --largo:0.599; --ang:236.6deg; }
.brotes > li:nth-child(2){ --largo:0.605; --ang:262.4deg; }
.brotes > li:nth-child(3){ --largo:0.603; --ang:264.3deg; }
#redes-toggle:checked ~ .brotes{ pointer-events:auto; }
#redes-toggle:checked ~ .brotes > li{ opacity:1; }
/* Los tres NUDOS del brote, o sea dónde acaba el rabillo de cada hoja. Van
encadenados —del agarre al primero, del primero al segundo, del segundo al
tercero—, así que lo que se dibuja es un solo brote con tres hojas y no tres
hojas sueltas. Bajan hacia la izquierda, al hueco que dejan Eventos por
arriba y Campañas por la derecha; en fila horizontal Instagram se comía
Campañas (hasta 92px a 1280x720). Medido en las 7 pantallas de
brotes_desk.py. */
#redes-toggle:checked ~ .brotes > li:nth-child(1){
transform:translate(-50%,0) translate(calc(var(--r) * -0.500), calc(var(--r) * 0.330)) scale(1);
transition-delay:0s;
}
#redes-toggle:checked ~ .brotes > li:nth-child(2){
transform:translate(-50%,0) translate(calc(var(--r) * -1.100), calc(var(--r) * 0.410)) scale(1);
transition-delay:.07s;
}
/* El último no puede bajar más: a 0.60 de radio el dibujo de Instagram se
salía por abajo de la pantalla en cinco de las siete —hasta 32px a 1600x900—
y a 1280x720 se cortaba la etiqueta. Tampoco puede subir: entonces se mete
en la hoja de Eventos. */
#redes-toggle:checked ~ .brotes > li:nth-child(3){
transform:translate(-50%,0) translate(calc(var(--r) * -1.700), calc(var(--r) * 0.470)) scale(1);
transition-delay:.14s;
}
/* La hoja REDES avisa de que se abre y se cierra */
#redes-toggle:checked ~ .hoja{ --trazo:var(--rosa-vivo); --nervio:var(--rosa); }
#redes-toggle:checked ~ .hoja .hoja-txt{ color:var(--rosa-encendido); }
.li-redes .hoja{ cursor:pointer; }
/* Foco de teclado: el checkbox está oculto, así que lo marca la hoja */
#redes-toggle:focus-visible ~ .hoja .hoja-svg{
filter:drop-shadow(0 0 3px var(--rosa)) drop-shadow(0 0 12px var(--rosa));
}
@media (prefers-reduced-motion:reduce){
.brotes > li{ transition-duration:.01ms!important; }
}
/* En las páginas de texto la columna va centrada, así que el enlace de volver
se quedaba solo en el margen izquierdo. Se alinea con el borde izquierdo de
la columna: 50% menos media columna. Si el navegador no entiende :has(),
se queda donde estaba, que tampoco rompe nada. */
.main:has(.texto) .volver{
margin-left:max(clamp(20px,5vw,60px), calc(50% - 34ch));
}
/* ===================== FOCO DE TECLADO =====================
Estar fuera de pantalla con transform NO saca un enlace del orden de
tabulación: quien navega con teclado pasaba por los nueve enlaces del menú
cerrado antes de llegar al contenido, y por las tres redes con el brote
cerrado. `visibility:hidden` sí los saca, y se retrasa su vuelta a hidden
lo que dura la animación para que el cierre siga viéndose. */
.sidebar{
visibility:hidden;
transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s .32s;
}
#nav-toggle:checked ~ .container .sidebar{
visibility:visible;
transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
}
.brotes > li{ visibility:hidden; }
#redes-toggle:checked ~ .brotes > li{ visibility:visible; }
/* En pantallas muy estrechas, siete columnas dan 55px cada una y ahí no cabe
ningún texto útil: "Autodefensa 20:00" quedaba en "Autod...".
Durante un tiempo la salida fue quitarle el texto a la píldora
—`font-size:0`— y dejar sólo una barra del color del colectivo, con la
leyenda de debajo para descifrarla. La asamblea lo rechazó: en el móvil hay
que leer la hora y el nombre, no interpretar colores.
Así que por debajo de 560px la rejilla deja de ser rejilla y se convierte en
una LISTA DE DÍAS, uno debajo de otro y a todo el ancho. Ahí el texto entra
entero. Se hace sólo con CSS: el guión del calendario sigue dibujando
exactamente el mismo DOM y no se toca ni una línea de él.
En ordenador y en tableta no cambia nada. */
@media (max-width:560px){
/* El marco de la rejilla sobra: ahora cada día es su propia tarjeta. */
.cal{ border:none; background:transparent; overflow:visible; border-radius:0; }
/* Los rótulos L M X J V S D sólo tienen sentido en siete columnas. */
.cal-row.cal-head{ display:none; }
/* `contents` disuelve la fila: las celdas pasan a ser hijas de .cal y caen
una debajo de otra. La regla de más arriba que esconde la semana entera
vacía tiene más especificidad, así que sigue mandando. */
.cal-row{ display:contents; }
/* La celda deja de ser columna flexible y pasa a bloque, para que el día de
la semana y el número salgan en la misma línea y las píldoras debajo. */
.cal-cell{
display:block; min-height:0;
margin:0 0 8px; padding:10px 12px 12px;
border:var(--pluma) solid var(--rosa-tenue); border-radius:var(--curva);
background:var(--verde-humo);
}
/* Los días sin nada no pintan nada en una lista, y un mes entero son treinta
tarjetas. Se quedan los que tienen actividad y el de hoy, aunque esté
vacío. Donde no haya :has() salen todos: se ve más largo, no roto. */
.cal-cell:not(:has(.cal-pills)):not(:has(.cal-turno)):not(.cal-today){ display:none; }
.cal-cell.cal-empty{ display:none; }
/* El nombre del día lo pone el CSS a partir de la posición dentro de la
fila: la columna 1 es lunes. `display:contents` no toca el árbol, así que
:nth-child sigue contando igual. */
.cal-cell::before{
font-family:var(--titular); font-size:.82rem; letter-spacing:.12em;
text-transform:uppercase; color:var(--rosa-legible); margin-right:7px;
}
.cal-row > .cal-cell:nth-child(1)::before{ content:"Lunes"; }
.cal-row > .cal-cell:nth-child(2)::before{ content:"Martes"; }
.cal-row > .cal-cell:nth-child(3)::before{ content:"Miércoles"; }
.cal-row > .cal-cell:nth-child(4)::before{ content:"Jueves"; }
.cal-row > .cal-cell:nth-child(5)::before{ content:"Viernes"; }
.cal-row > .cal-cell:nth-child(6)::before{ content:"Sábado"; }
.cal-row > .cal-cell:nth-child(7)::before{ content:"Domingo"; }
.cal-daynum{ display:inline; font-size:1.05rem; color:var(--tinta); }
.cal-pills{ gap:5px; margin-top:8px; }
/* La píldora recupera su texto y ocupa el ancho de la tarjeta. Con 1.35 de
interlínea y 8px arriba y abajo mide 35px de alto, por encima de los 24
que pide WCAG 2.5.8 para tocarla con el dedo. */
.cal-pill{
font-size:.92rem; line-height:1.35; color:var(--tinta);
padding:8px 14px; border-radius:999px;
white-space:normal; text-overflow:clip; overflow:visible;
background-clip:border-box;
}
/* En reposo la píldora no se mueve; el desplazamiento del :hover de
escritorio se queda para el toque, que es donde se agradece. */
.cal-pill:hover, .cal-pill:active{ transform:none; }
.cal-legend{ margin-top:18px; }
.cal-legend-item{ font-size:.78rem; }
}
/* Entre 561 y 900px las columnas del calendario dan unos 90-110px: ahí
"Autodefensa 20:00" se cortaba con puntos suspensivos. Dejándolo partir en
dos líneas cabe entero y no se pierde información. */
@media (min-width:561px) and (max-width:900px){
.cal-pill{
white-space:normal;
line-height:1.18;
padding:3px 7px;
text-overflow:clip;
}
.cal-cell{ min-height:clamp(66px,10vw,104px); }
}
/* ============ LOS BROTES EN MÓVIL ============
Va al FINAL a propósito: la definición base de .brotes se declara más
arriba, así que un bloque de móvil colocado antes perdería por orden de
aparición.
Aquí no cabe un abanico. El tallo es vertical y las hojas ocupan los ~130px
del centro de la pantalla, así que lo único libre son las dos franjas de los
lados: a 390 miden 62px, a 360 unos 86 y a 320 llegan a 110. Antes los tres
brotes salían a la DERECHA, y ahí no caben: se comían Eventos por arriba y
Campañas por abajo —medido a 390 y a 360, hasta 55px de solape— y se pisaban
entre ellos.
Ahora salen por la IZQUIERDA. El brote nace del agarre, pasa por DEBAJO de
la hoja de REDES —que es la única que hay en ese lado— y TREPA por el margen
con las tres hojas apuntando hacia fuera. Trepar en vez de colgar no es un
capricho: hacia arriba es donde hay 150px seguidos sin nada, y una hiedra
sube. Las medidas son propias porque la fórmula de ordenador (--y sobre
--fila) sitúa el ancla 300px por debajo de una hoja que mide 160. */
@media (max-width:1023px){
/* El radio y el tamaño del brote salen de --ancho-hoja, no de la pantalla:
si las hojas crecen, el brote crece con ellas y no se descuadra. */
.brotes{
--r:calc(var(--ancho-hoja) * .70);
--brote:calc(var(--ancho-hoja) * .48); /* sin --tam: ver arriba */
left:50%; top:50%;
}
/* El brote es medio limbo, asi que el 60% de ancho que le vale a una hoja
grande deja "MASTODON" partido en dos lineas. Se le da casi todo el
ancho: el calado del text-shadow ya separa las letras del dibujo. */
.hoja-brote .hoja-txt{ width:88%; }
/* Apuntan hacia fuera, casi horizontales; los tres grados de diferencia son
para que no salgan calcadas. */
.brotes > li:nth-child(1) .hoja{ --giro:96deg; }
.brotes > li:nth-child(2) .hoja{ --giro:90deg; }
.brotes > li:nth-child(3) .hoja{ --giro:84deg; }
/* El primer tramo sale del tallo gordo hasta el margen; los otros dos suben
rectos, de hoja en hoja (--ang:0 es "hacia abajo", o sea de vuelta a la
hoja anterior). */
.brotes > li:nth-child(1){ --largo:1.649; --ang:256.0deg; }
.brotes > li:nth-child(2){ --largo:0.850; --ang:0.0deg; }
.brotes > li:nth-child(3){ --largo:0.850; --ang:0.0deg; }
/* La columna va a 1.6 radios del tallo: a 390 —el ancho donde menos margen
queda— la hoja entra justo y la etiqueta acaba a 7px del borde. */
#redes-toggle:checked ~ .brotes > li:nth-child(1){
transform:translate(-50%,0) translate(calc(var(--r) * -1.60), calc(var(--r) * 0.40)) scale(1);
}
#redes-toggle:checked ~ .brotes > li:nth-child(2){
transform:translate(-50%,0) translate(calc(var(--r) * -1.60), calc(var(--r) * -0.45)) scale(1);
}
#redes-toggle:checked ~ .brotes > li:nth-child(3){
transform:translate(-50%,0) translate(calc(var(--r) * -1.60), calc(var(--r) * -1.30)) scale(1);
}
}
/* El menú tiene 9 enlaces con letra grande a propósito. En una pantalla de
768 de alto no cabían: el último quedaba 36px por debajo y había que
deslizar. El lema del panel ocupa 91px y repite lo que ya pone la portada,
así que en pantallas bajas se quita y caben los nueve. */
@media (max-height:820px){
.sidebar .lema{ display:none; }
.sidebar{ padding-top:84px; }
.sidebar-nav li{ margin-bottom:2px; }
.sidebar .sb-marca{ margin-bottom:22px; }
}
/* ========================== 10. PEDIR EVENTO ==========================
La sección /pedir/: el calendario de fechas pedidas y confirmadas, y los
formularios con los que se piden y se confirman. Las sirve el gestor, no son
ficheros de esta carpeta, pero comparten esta hoja y sus colores.
El sitio no tenía ni un estilo de formulario —sólo las dos flechas del
calendario—, así que todo lo de aquí es nuevo. Los contrastes van medidos
contra el mismo umbral que el resto: --rosa a secas NUNCA para texto (3.1:1),
--rosa-legible sí, tanto de tinta como de fondo con texto claro encima. */
/* ---- El botón de la barra lateral ----
Va encima del logo, que es lo primero que se ve al abrir el menú con el botón
de arriba a la izquierda. */
.sb-pedir{
display:block; margin:0 0 18px; padding:13px 12px;
background:var(--rosa-legible); color:var(--verde-humo);
font-family:var(--titular); font-size:.95rem; letter-spacing:.14em;
text-transform:uppercase; text-align:center; text-decoration:none;
border:var(--pluma) solid var(--rosa); border-radius:var(--curva);
transition:background .2s, color .2s;
}
.sb-pedir:hover, .sb-pedir:active{ background:var(--rosa); color:var(--negro); }
/* ---- El menú de la sección ---- */
.pedir-menu{
display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;
margin:0 clamp(16px,5vw,60px) 22px; padding:8px;
border:var(--pluma) solid var(--verde-vivo); border-radius:var(--curva);
background:var(--verde-humo);
}
.pedir-menu a, .pedir-salir button{
display:flex; align-items:center; min-height:44px; padding:0 14px;
font-family:var(--titular); font-size:.8rem; letter-spacing:.1em;
text-transform:uppercase; text-decoration:none;
color:var(--rosa-legible); background:transparent;
border:none; border-radius:var(--curva); cursor:pointer;
}
.pedir-menu a:hover, .pedir-menu a:active,
.pedir-salir button:hover, .pedir-salir button:active{
background:var(--rosa-legible); color:var(--verde-humo);
}
.pedir-menu a[aria-current="page"]{
color:var(--tinta); box-shadow:inset 0 -3px 0 var(--rosa);
}
.pedir-salir{ margin-left:auto; }
.pedir-salir button{ color:var(--verde-hoja); }
/* ---- Avisos ---- */
.pedir-aviso, .pedir-error{
margin:0 clamp(16px,5vw,60px) 22px; padding:14px 18px;
border-radius:var(--curva); font-family:var(--lectura); line-height:1.6;
}
.pedir-aviso{ border:var(--pluma) solid var(--verde-hoja); background:#e7f2e9; color:var(--tinta); }
.pedir-error{ border:var(--pluma) solid var(--rosa); background:#fdeaf5; color:var(--rosa-legible); font-weight:700; }
/* ---- Aviso para colectivos de fuera ----
Una línea en naranja, el color de «solicitado externas». El naranja del
calendario (#ff7a00) no llega a AA como texto sobre el fondo claro; este
más tostado da 5.3:1 en la zona más oscura del degradado. */
.pedir-externas{
margin:10px clamp(16px,5vw,60px) 18px;
font-family:var(--lectura); font-size:1rem; line-height:1.6; color:#9a4400;
}
.pedir-externas strong{ color:#9a4400; }
/* ---- Textos de apoyo ---- */
.pista{ display:block; margin-top:4px; font-size:.85rem; color:var(--tinta-suave); }
.pedir-reglas{ margin:0 0 26px; padding-left:22px; line-height:1.7; max-width:70ch; }
/* ---- Formularios ---- */
.pedir-form{ max-width:34rem; }
.pedir-form p{ margin:0 0 18px; }
.pedir-form label{
display:block; margin-bottom:6px;
font-family:var(--titular); font-size:.82rem; letter-spacing:.1em;
text-transform:uppercase; color:var(--tinta);
}
.pedir-form input[type="text"], .pedir-form input[type="password"],
.pedir-form input[type="date"], .pedir-form input[type="time"],
.pedir-form select, .pedir-form textarea,
.solicitud-resolver input[type="text"]{
width:100%; box-sizing:border-box; min-height:46px; padding:10px 13px;
font-family:var(--lectura); font-size:1rem;
color:var(--tinta); background:var(--verde-humo);
border:var(--pluma) solid var(--verde-hoja); border-radius:var(--curva);
}
.pedir-form textarea{ min-height:110px; line-height:1.6; resize:vertical; }
.pedir-form input:focus-visible, .pedir-form select:focus-visible,
.pedir-form textarea:focus-visible{ outline:3px solid var(--rosa); outline-offset:2px; }
/* ---- Botones ----
El relleno deja los 44px de alto que pide el sitio para lo que se toca. */
.pedir-boton, .pedir-boton-flojo, .pedir-form button{
display:inline-flex; align-items:center; justify-content:center;
min-height:44px; padding:0 22px;
font-family:var(--titular); font-size:.9rem; letter-spacing:.12em;
text-transform:uppercase; text-decoration:none; text-align:center;
border-radius:var(--curva); cursor:pointer;
transition:background .2s, color .2s;
}
.pedir-boton, .pedir-form button{
color:var(--verde-humo); background:var(--rosa-legible);
border:var(--pluma) solid var(--rosa-legible);
}
.pedir-boton:hover, .pedir-boton:active,
.pedir-form button:hover, .pedir-form button:active{
background:var(--rosa); color:var(--negro); border-color:var(--rosa);
}
.pedir-boton-flojo{
min-height:44px; padding:0 15px; font-size:.78rem;
color:var(--tinta); background:transparent;
border:var(--pluma) solid var(--verde-hoja);
}
.pedir-boton-flojo:hover, .pedir-boton-flojo:active{
background:var(--verde-hoja); color:var(--verde-humo);
}
.en-linea{ display:flex; flex-wrap:wrap; gap:6px; }
/* ---- Tablas ----
El envoltorio deja deslizar la tabla a lo ancho en vez de desbordar la
página, que es lo que mide el banco de pruebas. */
.tabla-envoltorio{ overflow-x:auto; }
.pedir-tabla{
width:100%; border-collapse:collapse;
font-family:var(--lectura); font-size:.95rem;
}
.pedir-tabla th[scope="col"]{
font-family:var(--titular); font-size:.78rem; letter-spacing:.12em;
text-transform:uppercase; text-align:left; padding:10px 12px;
color:var(--rosa-legible);
border-bottom:var(--pluma) solid var(--rosa-tenue);
}
.pedir-tabla td, .pedir-tabla th[scope="row"]{
padding:12px; text-align:left; vertical-align:top;
border-bottom:var(--pluma) solid var(--rosa-papel);
}
.pedir-tabla th[scope="row"]{ font-family:var(--titular); letter-spacing:.04em; font-weight:400; }
/* Modificar y Quitar, uno junto al otro en la última columna de la tabla. */
.acciones{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.acciones form{ margin:0; }
/* ---- Estados ---- */
.estado{
display:inline-block; padding:4px 11px; border-radius:999px;
font-family:var(--titular); font-size:.72rem; letter-spacing:.1em;
text-transform:uppercase; white-space:nowrap; color:var(--tinta);
}
/* Solicitado en negro y confirmado en verde radiactivo: se distinguen de un
vistazo entre sí y de los dos fondos de finde, que son verde apagado y rosa. */
.estado-solicitado{ background:var(--negro); color:#fff; }
.estado-solicitado.estado-externas{ background:#ff7a00; color:#000; }
.estado-confirmado{ background:#39ff14; color:#000; box-shadow:inset 0 0 0 1.4px #000; }
.finde-tranqui{ background:#a3d1b0; box-shadow:inset 0 0 0 1.4px var(--verde-hoja); }
.finde-ruido{ background:#fbdcef; box-shadow:inset 0 0 0 1.4px var(--rosa); }
/* ---- Solicitudes pendientes ---- */
.solicitud{
border:var(--pluma) solid var(--verde-vivo);
border-left:7px solid var(--rosa);
border-radius:var(--curva);
padding:18px 20px; margin:0 0 20px; max-width:60rem;
}
.solicitud h3{
font-family:var(--titular); font-size:1.15rem; letter-spacing:.04em;
margin:0 0 12px; color:var(--tinta);
}
.solicitud-datos{ margin:0 0 16px; font-family:var(--lectura); }
.solicitud-datos dt{
font-family:var(--titular); font-size:.74rem; letter-spacing:.12em;
text-transform:uppercase; color:var(--verde-hoja); margin-top:10px;
}
.solicitud-datos dd{ margin:2px 0 0; line-height:1.6; }
.solicitud-resolver{
display:flex; flex-wrap:wrap; align-items:center; gap:10px;
padding-top:14px; border-top:var(--pluma) dashed var(--rosa-tenue);
}
.solicitud-resolver label{
font-family:var(--titular); font-size:.74rem; letter-spacing:.12em;
text-transform:uppercase; color:var(--tinta);
}
.solicitud-resolver input[type="text"]{ flex:1 1 15rem; min-height:44px; }
/* ---- La clave temporal, que sólo se enseña una vez ---- */
.clave-nueva{
font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
font-size:1.5rem; letter-spacing:.12em; overflow-wrap:anywhere;
padding:16px 18px; margin:0 0 14px; color:var(--tinta);
background:var(--verde-hondo);
border:var(--pluma) dashed var(--verde-hoja); border-radius:var(--curva);
}
/* ---- Leyenda del calendario de fechas ---- */
.leyenda-pedir{ display:flex; flex-wrap:wrap; gap:10px 16px; margin:0 0 26px; }
/* Las muestras de estado miden lo mismo que las de finde, para que la
leyenda sea una sola fila pareja. Va con .leyenda-pedir delante porque
.cal-ev, más abajo, les pondría su propio relleno y su esquina. */
.leyenda-pedir .leyenda-muestra{
display:inline-flex; align-items:center; padding:6px 14px;
border-radius:999px; font-size:.85rem;
}
.leyenda-finde{
display:inline-flex; align-items:center; padding:6px 14px;
border:var(--pluma) solid var(--verde-hoja); border-radius:999px;
font-family:var(--lectura); font-size:.85rem; color:var(--tinta);
}
.leyenda-finde.cal-tranqui{ background:#a3d1b0; }
.leyenda-finde.cal-ruido{ background:#fbdff0; border-color:var(--rosa); }
/* ---- El calendario de fechas ----
Reaprovecha la rejilla del calendario semanal (.cal, .cal-row, .cal-cell), y
con ella el paso a lista de días en el móvil. Lo que cambia es lo que va
dentro de la celda: aquí un evento necesita tres líneas —hora y estado,
nombre, y quién lo pide—, así que no puede ser una .cal-pill de una línea. */
.cal-fechas .cal-cell:not(.cal-head-cell){ min-height:clamp(74px,10vw,132px); }
.cal-mes{
font-family:var(--titular); font-size:clamp(1rem,.85rem + .7vw,1.35rem);
text-transform:uppercase; letter-spacing:.08em;
color:var(--rosa-legible); margin:26px 0 10px;
}
.cal-fechas + .cal-mes, .cal + .cal-mes{ margin-top:34px; }
.cal-turno{
display:inline-block; margin-top:2px; padding:1px 7px;
font-family:var(--titular); font-size:.56rem; letter-spacing:.08em;
text-transform:uppercase; white-space:nowrap;
color:var(--tinta); background:var(--verde-humo);
border:1px solid var(--verde-hoja); border-radius:999px;
}
/* El fondo del finde. Va después de la regla del sábado y el domingo que pinta
.cal-cell:nth-child(6) y (7), y con la misma especificidad, así que manda
este por orden: en la sección de fechas el turno pesa más que «es finde». */
.cal-row:not(.cal-head) > .cal-cell.cal-tranqui{ background:#a3d1b0; }
.cal-row:not(.cal-head) > .cal-cell.cal-ruido{ background:#fbdff0; }
.cal-ev{
display:block; padding:5px 9px; border-radius:var(--curva);
font-family:var(--lectura); font-size:.72rem; line-height:1.35;
color:var(--tinta); overflow-wrap:anywhere;
}
.cal-ev-solicitado{ background:var(--negro); color:#fff; }
.cal-ev-confirmado{ background:#39ff14; color:#000; box-shadow:inset 0 0 0 1.4px #000; }
/* Lo que apunta la asamblea de externas, mientras espera: naranja con letra
negra (8.3:1). Confirmado pasa al verde como cualquier otro. */
.cal-ev-solicitado.cal-ev-externas{ background:#ff7a00; color:#000; }
.cal-ev-cab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; }
.cal-ev-hora{ font-family:var(--titular); font-size:.78rem; letter-spacing:.04em; }
.cal-ev-estado{
font-family:var(--titular); font-size:.58rem; letter-spacing:.1em;
text-transform:uppercase; margin-left:auto;
}
.cal-ev-solicitado .cal-ev-estado{ color:var(--rosa-vivo); } /* 6.7:1 sobre el negro */
.cal-ev-confirmado .cal-ev-estado{ color:#000; }
.cal-ev-nom{ display:block; font-weight:700; }
.cal-ev-quien{ display:block; font-size:.66rem; color:var(--tinta-suave); }
.cal-ev-solicitado .cal-ev-quien{ color:#d0d4c8; }
.cal-ev-externas .cal-ev-estado, .cal-ev-externas .cal-ev-quien{ color:#000; }
.cal-ev-confirmado .cal-ev-quien{ color:var(--tinta); }
.cal-pasado{ opacity:.55; }
/* ---- Findes o semana entera ----
Por defecto solo se ven viernes, sábado y domingo, que es cuando se hacen
los eventos: en el móvil la lista queda en la mitad. La casilla #ver-semana
va antes de los meses, así que con ~ decide qué se pinta, sin JavaScript,
igual que el #nav-toggle del menú. Todo va con :not(:checked): marcada, se
aplican tal cual las reglas de siempre de la rejilla y de la lista. */
.ver-semana-boton{ display:inline-flex; align-items:center; margin:0 0 18px; cursor:pointer; }
.ver-semana-boton .si{ display:none; }
.ver-semana:checked + .ver-semana-boton .no{ display:none; }
.ver-semana:checked + .ver-semana-boton .si{ display:inline; }
.ver-semana:focus-visible + .ver-semana-boton{ outline:3px solid var(--rosa); outline-offset:2px; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ver-semana:not(:checked) ~ .cal-fechas .cal-row > .cal-cell:nth-child(-n+4){ display:none; }
/* La última semana de un mes que acaba en jueves no tiene finde: fuera. */
.ver-semana:not(:checked) ~ .cal-fechas .cal-row:not(.cal-head):not(:has(> .cal-cell:nth-child(n+5):not(.cal-empty))){ display:none; }
/* ---- Pinchar un día libre ----
Cada día que se puede pedir lleva un enlace a /pedir/nueva?fecha=…. El
::after lo estira sobre toda la celda, así que se pincha en cualquier parte
del día y no solo en la palabra. Sin sesión, el gestor manda a la entrada y
vuelve al formulario con la fecha puesta. */
.cal-fechas .cal-cell.cal-libre{ position:relative; }
.cal-pedir{
align-self:flex-start; margin-top:auto; padding:2px 9px;
font-family:var(--titular); font-size:.62rem; letter-spacing:.1em;
text-transform:uppercase; text-decoration:none;
color:var(--rosa-legible); border:1px solid var(--rosa-legible); border-radius:999px;
}
.cal-pedir::after{ content:""; position:absolute; inset:0; }
.cal-fechas .cal-cell.cal-libre:hover, .cal-fechas .cal-cell.cal-libre:active{
box-shadow:inset 0 0 0 2.5px var(--rosa-legible);
}
.cal-libre:hover .cal-pedir, .cal-libre:active .cal-pedir{
background:var(--rosa-legible); color:#fff;
}
.cal-pedir:focus-visible{ outline:3px solid var(--rosa); outline-offset:2px; }
/* ---- Letra grande con solo tres columnas ----
En ordenador, con solo el finde, cada columna mide unos 380px: las medidas
de la rejilla de siete (número a .78rem, eventos a .72rem) se quedaban
perdidas en la casilla. Con la semana entera vuelven las de siempre. */
@media (min-width:561px){
.ver-semana:not(:checked) ~ .cal-fechas .cal-cell:not(.cal-head-cell){
padding:12px 14px 14px; gap:8px; min-height:clamp(110px,12vw,150px);
}
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell{ padding:16px 2px; }
/* Con tres columnas caben los nombres enteros: la letra suelta se esconde
y el nombre lo pone el CSS según la columna, como en la lista del móvil. */
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell abbr{ font-size:0; text-decoration:none; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell abbr::after{ font-size:1.05rem; letter-spacing:.14em; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell:nth-child(5) abbr::after{ content:"Viernes"; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell:nth-child(6) abbr::after{ content:"Sábado"; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell:nth-child(7) abbr::after{ content:"Domingo"; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-daynum{ font-size:1.5rem; color:var(--tinta); }
.ver-semana:not(:checked) ~ .cal-fechas .cal-turno{ font-size:.74rem; padding:3px 12px; align-self:flex-start; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-pedir{ font-size:.9rem; padding:6px 16px; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-ev{ font-size:1rem; padding:10px 14px; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-ev-hora{ font-size:1.1rem; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-ev-estado{ font-size:.74rem; }
.ver-semana:not(:checked) ~ .cal-fechas .cal-ev-quien{ font-size:.88rem; }
}
@media (max-width:560px){
.pedir-menu{ margin:0 clamp(16px,5vw,60px) 16px; }
.pedir-menu a, .pedir-salir button{ font-size:.74rem; padding:0 10px; }
.pedir-salir{ margin-left:0; }
/* En lista, la altura la pone el contenido: un finde libre es una tarjeta de
una línea, no un hueco de 132px. */
.cal-fechas .cal-cell:not(.cal-head-cell){ min-height:0; }
/* La lista esconde los días vacíos, pero uno libre para pedir no está vacío:
tiene su botón. Misma especificidad que la regla que los esconde y va
después, así que manda esta. */
.cal-fechas .cal-row > .cal-cell.cal-libre{ display:block; }
.cal-pedir{ float:right; font-size:.74rem; padding:4px 12px; }
.cal-ev{ font-size:.92rem; padding:8px 12px; }
.cal-ev-hora{ font-size:1rem; }
.cal-ev-estado{ font-size:.66rem; }
.cal-ev-quien{ font-size:.82rem; }
.cal-turno{ font-size:.66rem; margin-left:6px; }
.clave-nueva{ font-size:1.15rem; }
}
Reference in a new issue View git blame Copy permalink