8bcaf1644c
Portada - La bajada del título pasa de un trazo de grosor constante a dos cintas trenzadas que se afilan, con la punta rematada en zarcillo. El viewBox es 1000x72 y la caja mide el 7.2% del ancho de la rejilla, así que la escala sale uniforme y el dibujo no se deforma en ninguna pantalla. - El giro de la esquina es una Bézier cúbica de salida vertical y la franja entra también vertical: radio mínimo 26 unidades en vez de 15. - La franja entera pasa de trazos a cintas. La cola deja de ser un lazo y abre un bucle afilado que remata una espiral logarítmica verde, con centro y sentido derivados de la tangente del tallo. - El rabillo de la hoja pasa de 24 a 42 unidades (recuadro 100x132) para que el limbo no cruce la raíz. Con él, el origen del giro (1.52%) y la etiqueta (62%), que se miden sobre ese alto. - Letra de las etiquetas un 10% mayor. "La Enre" a 164 grados y tamaño 1.16; "Calendario", a 1.00. Móvil - El tallo pasa de una recta a una onda de coseno, media vuelta por celda, en un recuadro cuadrado para que la escala sea uniforme. Tres dibujos: la onda, su espejo para las celdas pares y el remate en espiral de la última. - Las seis hojas entran sin deslizar de 320x568 en adelante: la celda reparte el alto disponible en vez de medir lo que mide la hoja, --ancho-hoja se mide contra las dos dimensiones y la cabecera baja de 104 a 68px. - El abanico de REDES se recoloca (centro -0.25r, apertura 0.50r) para caber en el hueco nuevo. Páginas - colectivos.html, calendario.html, eventos.html, tatus.html, panel.html y 404.html. - El calendario semanal esconde la semana entera vacía que dibujaba de más. Comprobado con qa.py: 0 fallos y 0 avisos en 150 mediciones (10 páginas por 15 pantallas), con contraste, foco, brotes y HTML roto incluidos.
993 lines
107 KiB
CSS
993 lines
107 KiB
CSS
/* =========================================================================
|
|
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(6n+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: los 138 selectores del fichero casan con
|
|
algún elemento en alguna de las siete páginas. 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;
|
|
}
|
|
|
|
/* ============================ 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; }
|
|
|
|
/* ========================== 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. */
|
|
--fila:clamp(282px,calc(100vh - 286px - 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);
|
|
/*@franja*/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-repeat:repeat-y;
|
|
background-position:left top;
|
|
background-size:100% var(--fila);
|
|
}
|
|
|
|
/* 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(6n+1){ --tanda:0s; }
|
|
.enredadera > li:nth-child(6n+2){ --tanda:.06s; }
|
|
.enredadera > li:nth-child(6n+3){ --tanda:.12s; }
|
|
.enredadera > li:nth-child(6n+4){ --tanda:.18s; }
|
|
.enredadera > li:nth-child(6n+5){ --tanda:.24s; }
|
|
.enredadera > li:nth-child(6n+6){ --tanda:.30s; }
|
|
.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 seis 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.
|
|
Añadir una hoja sigue siendo añadir un <li>. */
|
|
.enredadera > li:nth-child(6n+1){ --y:27.0; }
|
|
.enredadera > li:nth-child(6n+1) .hoja{ --giro:2deg; --tam:1.04; }
|
|
.enredadera > li:nth-child(6n+2){ --y:64.0; }
|
|
.enredadera > li:nth-child(6n+2) .hoja{ --giro:151deg; --tam:1.00; }
|
|
.enredadera > li:nth-child(6n+3){ --y:32.0; }
|
|
.enredadera > li:nth-child(6n+3) .hoja{ --giro:26deg; --tam:1.1; }
|
|
.enredadera > li:nth-child(6n+4){ --y:69.0; }
|
|
.enredadera > li:nth-child(6n+4) .hoja{ --giro:154deg; --tam:0.92; }
|
|
.enredadera > li:nth-child(6n+5){ --y:37.0; }
|
|
.enredadera > li:nth-child(6n+5) .hoja{ --giro:31deg; --tam:1.0; }
|
|
.enredadera > li:nth-child(6n+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(6n+6) .hoja{ --giro:164deg; --tam:1.16; }
|
|
|
|
/* ============================ 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; background-image:none;
|
|
grid-template-columns: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);
|
|
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;
|
|
transform:translate(-50%,-50%) scale(.16);
|
|
transition:opacity .3s ease, transform .5s cubic-bezier(.22,1.25,.4,1);
|
|
}
|
|
/* OJO con --tam aqui. El brote es descendiente de su <li>, asi que la regla
|
|
".enredadera > li:nth-child(6n+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:calc(clamp(90px,8.4vw,140px) * .88);
|
|
}
|
|
/* 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; }
|
|
|
|
.brotes > li:nth-child(1) .hoja{ --giro:26deg; }
|
|
.brotes > li:nth-child(2) .hoja{ --giro:0deg; }
|
|
.brotes > li:nth-child(3) .hoja{ --giro:-26deg; }
|
|
|
|
#redes-toggle:checked ~ .brotes{ pointer-events:auto; }
|
|
#redes-toggle:checked ~ .brotes > li{ opacity:1; }
|
|
/* El abanico cuelga abajo y a la izquierda del ancla. En fila horizontal se
|
|
metia en las columnas vecinas y el brote de Instagram se comia la hoja
|
|
Campanas (hasta 92px de solape a 1280x720). Medido en las 7 pantallas. */
|
|
#redes-toggle:checked ~ .brotes > li:nth-child(1){
|
|
transform:translate(-50%,-50%) translate(calc(var(--r) * -1.25), calc(var(--r) * .75)) scale(1);
|
|
transition-delay:0s;
|
|
}
|
|
#redes-toggle:checked ~ .brotes > li:nth-child(2){
|
|
transform:translate(-50%,-50%) translate(calc(var(--r) * -0.40), calc(var(--r) * .70)) scale(1);
|
|
transition-delay:.07s;
|
|
}
|
|
/* Instagram cuelga casi recto: con el rabillo largo el recuadro de la hoja
|
|
pasó de 114 a 132 de alto, el brote llegó más lejos y se comía Campañas
|
|
(21px a 1280x720). Subir el radio no vale: entonces Mastodon pisa Eventos.
|
|
Medido en las 7 pantallas de brotes_desk.py. */
|
|
#redes-toggle:checked ~ .brotes > li:nth-child(3){
|
|
transform:translate(-50%,-50%) translate(calc(var(--r) * 0.10), calc(var(--r) * 1.00)) 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...". Se cambia por
|
|
una barra del color del colectivo, que la leyenda de debajo explica. Sigue
|
|
siendo pulsable y el nombre completo queda en el title para lectores. */
|
|
@media (max-width:560px){
|
|
/* La barra se VE de 10px pero el elemento MIDE 24: el relleno vertical
|
|
agranda el área a la que llega el dedo y `background-clip:content-box`
|
|
deja el color sólo en la franja del medio. Con 10px de verdad, tocarla en
|
|
un móvil era imposible, y la página dice «pulsa cualquier etiqueta».
|
|
24px es el mínimo de WCAG 2.5.8. */
|
|
.cal-pill{
|
|
font-size:0; line-height:0; color:transparent;
|
|
/* content-box: con el border-box global el relleno se comía la altura y
|
|
la barra desaparecía. Así los 10px son los del color y el relleno los
|
|
suma por fuera hasta 24. */
|
|
box-sizing:content-box;
|
|
height:10px; padding:7px 0; border-radius:3px;
|
|
background-clip:content-box; box-shadow:none;
|
|
}
|
|
@supports (background: color-mix(in srgb, red 10%, transparent)){
|
|
.cal-pill{ background:color-mix(in srgb, var(--bg) 60%, transparent);
|
|
background-clip:content-box; box-shadow:none; }
|
|
}
|
|
.cal-cell{ gap:2px; }
|
|
.cal-pills{ gap:2px; }
|
|
.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í el tallo es vertical y la hoja de REDES apunta a la
|
|
izquierda, así que los brotes se apilan a la DERECHA, que es el lado libre.
|
|
Y las medidas son propias: 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 tamano del brote salen de --ancho-hoja, no de la pantalla:
|
|
si las hojas crecen, el abanico crece con ellas y no se descuadra.
|
|
El abanico va HACIA ARRIBA (de -1.20r a 0) porque la hoja de abajo,
|
|
Campanas, gira 248deg y su dibujo sube por la derecha, justo donde
|
|
caian los brotes: se pisaban en todos los anchos, hasta 99px en tablet. */
|
|
.brotes{
|
|
--r:calc(var(--ancho-hoja) * .70);
|
|
left:50%; top:50%;
|
|
}
|
|
.hoja-brote{ width:calc(var(--ancho-hoja) * .46); } /* sin --tam: ver arriba */
|
|
/* 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%; }
|
|
.brotes > li:nth-child(1) .hoja{ --giro:-72deg; }
|
|
.brotes > li:nth-child(2) .hoja{ --giro:-90deg; }
|
|
.brotes > li:nth-child(3) .hoja{ --giro:-108deg; }
|
|
/* El abanico va centrado en el hueco entre Eventos y Campañas y lo más
|
|
cerrado que se puede. Antes subía 1.20r y ahí cabía porque la celda medía
|
|
169px; ahora mide 92 y ese hueco es de unos 100px para tres brotes.
|
|
Buscado en rejilla sobre centro, apertura y tamaño con brotes_movil.py:
|
|
centro -0.25r, apertura 0.50r y el brote SIN encoger es lo único que da
|
|
cero en las ocho pantallas. Bajarlo más pisa Campañas; subirlo, Eventos. */
|
|
#redes-toggle:checked ~ .brotes > li:nth-child(1){
|
|
transform:translate(-50%,-50%) translate(calc(var(--r) * .85), calc(var(--r) * -.75)) scale(1);
|
|
}
|
|
#redes-toggle:checked ~ .brotes > li:nth-child(2){
|
|
transform:translate(-50%,-50%) translate(calc(var(--r) * 1.20), calc(var(--r) * -.25)) scale(1);
|
|
}
|
|
#redes-toggle:checked ~ .brotes > li:nth-child(3){
|
|
transform:translate(-50%,-50%) translate(calc(var(--r) * .85), calc(var(--r) * .25)) 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; }
|
|
}
|