/* Sistema de diseño de sergiruiz.es · extraído de la home rev 8 del paquete
docs/mockups/sergiruiz-web-diseno/. Las reglas y sus motivos están en
DISENO.md de ese paquete: NO se cambian colores sin volver a medir AA. */
@import url('fonts.css');
:root{
--paper:#F6F1E3;
--ink:#2A2622; --ink-soft:#554E3F; --ink-faint:#786C51; /* A5: 4.58:1 */
--pencil:#6B6256; --red:#B54A41; /* A5: 4.63:1 */
--link:#1E4F86; --fluor:#F5D94E;
--hand:"Kalam",cursive;
--body:"Literata",Georgia,serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--col:min(100% - 40px, 46rem);
--ancho:min(100% - 40px, 62rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip} /* nada, jamás, genera scroll horizontal */
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--body);font-size:17px;line-height:1.7;
-webkit-font-smoothing:antialiased;
}
body::before{ /* grano del papel */
content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--fluor);color:var(--ink)}
.wrap{width:var(--col);margin:0 auto;position:relative;z-index:2}
.ancho{width:var(--ancho);margin:0 auto;position:relative;z-index:2}
/* ---------------- escala ---------------- */
h1{
font-family:var(--hand);font-weight:700;
font-size:clamp(2.25rem,6vw,3.2rem);line-height:1.08;
margin:0 0 18px;transform:rotate(-1deg);transform-origin:left center;text-wrap:balance;
}
h2{
font-family:var(--hand);font-weight:700;
font-size:clamp(1.6rem,3.7vw,2.15rem);line-height:1.16;
margin:0 0 18px;transform:rotate(-.5deg);transform-origin:left center;text-wrap:balance;
}
h3{font-family:var(--body);font-weight:700;font-size:1.12rem;line-height:1.3;margin:0 0 4px}
p{margin:0 0 15px;max-width:66ch}
.lede{font-size:1.06rem;color:var(--ink-soft)}
.meta{
font-family:var(--hand);font-weight:400;font-size:1.05rem;color:var(--pencil);
transform:rotate(-.8deg);transform-origin:left center;margin:0 0 10px;
}
/* ---------------- notas rojas: al margen SOLO si hay margen de verdad ----------------
Breakpoint por contenedor: .wrap (46rem) ≥1240px, .ancho (62rem) ≥1500px.
Debajo, la nota fluye dentro de la columna. Nunca corta ni genera scroll. */
.sub{font-family:var(--hand);font-weight:400;font-size:1.15rem;line-height:1.35;color:var(--red);
transform:rotate(-1.2deg);transform-origin:left center;margin:-6px 0 24px;max-width:38ch}
.con-nota{position:relative}
@media (min-width:1240px){
.wrap.con-nota > .sub{
position:absolute;left:calc(100% + 34px);top:2px;width:200px;margin:0 !important;
font-size:1.02rem;text-align:left !important;transform:rotate(1.8deg);transform-origin:left top;
}
}
@media (min-width:1500px){
.ancho.con-nota > .sub{
position:absolute;left:calc(100% + 34px);top:2px;width:200px;margin:0;
font-size:1.02rem;transform:rotate(1.8deg);transform-origin:left top;
}
}
/* ---------------- C1 · un significante, un significado ---------------- */
a{
color:var(--link);text-decoration:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10' viewBox='0 0 140 10'%3E%3Cpath d='M0 6C30 2.6 60 8.6 90 5.2S122 3.6 140 6' fill='none' stroke='%231E4F86' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:repeat-x;background-position:0 100%;background-size:140px 10px;
padding:2px 0 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
a:hover,a:focus-visible{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10' viewBox='0 0 140 10'%3E%3Cpath d='M0 6C30 2.6 60 8.6 90 5.2S122 3.6 140 6' fill='none' stroke='%232A2622' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
color:var(--ink);
}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px}
.hl{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='36' preserveAspectRatio='none'%3E%3Cfilter id='m' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.22' numOctaves='2' seed='8'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='17'/%3E%3C/filter%3E%3Crect x='11' y='8' width='278' height='21' fill='%23F5D94E' filter='url(%23m)' opacity='.75'/%3E%3C/svg%3E");
background-size:100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone;
padding:2px 7px;margin:0 -4px;mix-blend-mode:multiply;
}
/* ---------------- tachón de libreta ---------------- */
.tacha{position:relative;white-space:nowrap}
.tacha::after{
content:"";position:absolute;left:-3%;right:-3%;top:50%;height:5px;margin-top:-2px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M0 4.5C26 2.2 52 6.4 78 4S104 3 120 4.6' fill='none' stroke='%232A2622' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50%/120px 8px;
transform:rotate(-1.4deg);opacity:.85;
}
/* ---------------- C2 · las acciones tienen forma ----------------
El hover es SOLO el ladeo. a.boton pisa a a:hover (que colaba su garabato
dentro del botón) y [hidden] recupera su display:none. */
.boton{
position:relative;display:inline-flex;align-items:center;justify-content:center;
min-height:50px;padding:11px 28px;margin:6px 12px 6px 0;
font-family:var(--hand);font-weight:700;font-size:1.2rem;line-height:1.1;
color:var(--ink);background:none;border:0;cursor:pointer;text-align:center;
background-image:none;text-decoration:none;
transition:transform .16s ease;
}
.boton[hidden]{display:none}
.boton:hover,.boton:focus-visible,
a.boton:hover,a.boton:focus-visible{background-image:none;color:var(--ink);transform:rotate(-1.4deg) scale(1.035)}
a.boton.principal,a.boton.principal:hover,a.boton.principal:focus-visible{color:#fff}
.boton svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.boton .t{position:relative;z-index:2}
.boton .trazo-b{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;
vector-effect:non-scaling-stroke}
.boton.principal{color:#fff}
.boton.principal .relleno{fill:var(--red)}
@media (prefers-reduced-motion:reduce){.boton{transition:none}}
/* ---------------- ritmo ---------------- */
section{margin:0 0 84px}
.aire{margin-bottom:116px}
.hero{padding:64px 0 8px;margin-bottom:122px}
/* ---------------- hero: texto y venn centrado debajo ---------------- */
.venn-zona{margin:34px auto 0;max-width:420px;text-align:center;position:relative}
.venn{width:100%;max-width:352px;overflow:visible}
.venn .aro-v{fill:none;stroke:var(--ink-soft);stroke-width:2.4;stroke-linecap:round;opacity:.85}
.venn .neg-t{font-size:15px;fill:var(--pencil)}
.venn .relleno-v{stroke:none}
.venn .hueco{fill:var(--paper);opacity:.93}
.venn text{font-family:var(--hand);font-weight:400;font-size:17px;fill:var(--ink-soft)}
.venn .desde{font-size:11px;fill:var(--ink-faint)}
.venn .yo{font-weight:700;font-size:18px;fill:var(--red)}
.venn-pie{font-family:var(--hand);font-weight:400;font-size:1.05rem;line-height:1.4;
color:var(--red);transform:rotate(-1deg);margin:10px auto 0;max-width:30ch}
@media (min-width:1240px){
.venn-zona .venn-pie{position:absolute;left:calc(100% + 26px);top:38%;width:200px;
margin:0;text-align:left;font-size:1.02rem;transform:rotate(1.8deg)}
}
/* ---------------- foto con celo ---------------- */
.tape{
position:absolute;width:88px;height:27px;z-index:3;
background:repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 2px, transparent 2px 7px),
linear-gradient(180deg, rgba(250,246,226,.55), rgba(238,229,197,.5));
box-shadow:0 2px 5px rgba(42,38,34,.16);
clip-path:polygon(2% 14%, 7% 0, 94% 4%, 100% 16%, 97% 86%, 91% 100%, 5% 96%, 0 82%);
}
.tape.tl{top:-13px;left:-22px;transform:rotate(-38deg)}
.tape.tr{top:-13px;right:-22px;transform:rotate(39deg)}
.about{display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:start}
.pinned{position:relative;transform:rotate(-1.6deg);width:fit-content;margin:8px 0 0}
.pinned img{display:block;width:230px;height:auto;
box-shadow:0 12px 26px -18px rgba(42,38,34,.75);filter:saturate(.82) contrast(1.02)}
@media (max-width:720px){
.about{grid-template-columns:1fr;gap:26px}
.pinned{margin:0 auto}
.pinned img{width:min(230px,62vw)}
}
/* ---------------- servicios: los márgenes trabajan ----------------
En pantalla ancha la flecha cuelga del margen izquierdo y el precio
rodeado del derecho, a la altura del título. En pantallas menores,
todo vuelve a fluir dentro de la columna. */
.servicio{position:relative;margin:0 0 56px;padding-left:82px}
.servicio:last-of-type{margin-bottom:0}
.servicio .fl{position:absolute;left:0;top:9px;width:62px;height:20px;color:var(--red);overflow:visible}
.servicio h3{font-family:var(--hand);font-weight:700;font-size:1.45rem;margin:0 0 8px}
.servicio h3 a{font-size:inherit}
.servicio .lado{margin:2px 0 0}
@media (max-width:600px){
.servicio{padding-left:46px}
.servicio .fl{width:36px;height:14px;top:10px}
}
@media (min-width:1240px){
.servicio{padding-left:0}
.servicio .fl{left:-80px;top:10px}
.servicio .lado{position:absolute;left:calc(100% + 26px);top:-2px;width:210px;margin:0}
.servicio .lado .precio{font-size:1.1rem;padding:5px 16px}
.servicio .lado .garantia{font-size:.92rem;margin-top:10px;max-width:none}
}
.precio{
position:relative;display:inline-block;font-family:var(--hand);font-weight:700;
font-size:1.3rem;color:var(--red);padding:6px 20px;margin:6px 0 4px;white-space:nowrap;
transform:rotate(1.4deg);
}
.precio svg{position:absolute;inset:-6px -4px;width:calc(100% + 8px);height:calc(100% + 12px);overflow:visible}
.precio .aro{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.garantia{font-family:var(--hand);font-weight:400;font-size:1.08rem;color:var(--pencil);
transform:rotate(-1deg);transform-origin:left center;margin:2px 0 0;max-width:36ch}
/* ---------------- testimonios ---------------- */
.opiniones{columns:2;column-gap:44px;margin:0;padding:0;list-style:none}
.opiniones li{break-inside:avoid;margin:0 0 30px;display:inline-block;width:100%}
.opiniones blockquote{margin:0 0 8px;font-size:.96rem;line-height:1.6;color:var(--ink-soft)}
.opiniones .quien{
font-family:var(--hand);font-weight:700;font-size:1.08rem;color:var(--ink);margin:0;line-height:1.25;
}
.opiniones .quien a{font-weight:400;font-size:1rem;background-size:110px 8px;padding-bottom:3px}
.opiniones.colapso li:nth-child(n+5){display:none}
@media (max-width:760px){.opiniones{columns:1}}
/* ---------------- ¿hablamos?: sin CTA, se enruta al servicio ---------------- */
.ir{list-style:none;margin:22px 0 0;padding:0}
.ir li{position:relative;padding-left:80px;margin:0 0 18px}
.ir .fl{position:absolute;left:2px;top:8px;width:60px;height:20px;color:var(--red);overflow:visible}
.ir a{font-family:var(--hand);font-weight:700;font-size:1.3rem}
@media (max-width:600px){
.ir li{padding-left:52px}
.ir .fl{width:38px;top:9px}
}
/* ---------------- B7 · la raya ---------------- */
.raya{width:var(--col);margin:0 auto 96px;padding:34px 0 0;position:relative;z-index:2}
.raya p{
font-family:var(--hand);font-weight:700;
font-size:clamp(1.3rem,3.1vw,1.6rem);line-height:1.3;margin:0;max-width:30ch;color:var(--ink);
}
.raya .abajo{transform:rotate(-.7deg);transform-origin:left center}
.raya svg{display:block;width:100%;height:26px;margin:22px 0;color:var(--ink);overflow:visible}
/* ---------------- proyectos propios: compactos, cifra al margen ---------------- */
.proyectos{
list-style:none;margin:36px 0 0;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:46px 54px;
}
.proyectos li{margin:0}
.proyectos h3{display:inline;font-family:var(--hand);font-weight:700;font-size:1.3rem;margin:0}
.proyectos h3 a{font-size:1.3rem}
.proyectos p{margin:4px 0 0;color:var(--ink-soft);font-size:.96rem;max-width:52ch}
.proyectos .cifra{margin:16px 0 0}
.proyectos li:nth-child(2n) .cifra{transform:rotate(-1.7deg)}
.cifra{
position:relative;display:inline-block;font-family:var(--hand);font-weight:700;
font-size:1.05rem;color:var(--red);padding:4px 15px;white-space:nowrap;
transform:rotate(2deg);
}
.cifra.larga{white-space:normal;max-width:24ch;text-align:center;font-size:.95rem;
line-height:1.35;padding:8px 18px}
.cifra svg{position:absolute;inset:-5px -3px;width:calc(100% + 6px);height:calc(100% + 10px);overflow:visible}
.cifra .aro{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
@media (max-width:680px){
.proyectos{grid-template-columns:1fr;gap:30px}
.proyectos li{display:grid;grid-template-columns:1fr auto;gap:0 14px;align-items:center}
.proyectos .cifra{margin:0;font-size:.9rem;padding:4px 12px}
.proyectos .cifra.larga{max-width:16ch;font-size:.8rem;padding:6px 12px}
}
/* ---------------- canales: árbol de esquema ---------------- */
.canales h2{text-align:center;transform:rotate(-.5deg);transform-origin:center;margin-bottom:4px}
.arbol{display:block;width:100%;height:84px;margin:0 0 6px;color:var(--ink);overflow:visible}
.arbol path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;
stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}
.tres .colu{text-align:center}
.tres a{font-family:var(--hand);font-weight:700;font-size:1.3rem}
.tres p{font-size:.9rem;color:var(--ink-faint);margin:10px auto 0;line-height:1.55;max-width:24ch}
.tres .colu:nth-child(1){transform:rotate(-.6deg)}
.tres .colu:nth-child(3){transform:rotate(.5deg)}
@media (max-width:700px){
.tres{gap:0 12px}
.tres p{display:none}
.tres a{font-size:1.05rem}
.arbol{height:64px}
}
/* ---------------- índice compacto, sin filetes ---------------- */
.indice{list-style:none;margin:0;padding:0;font-size:.95rem}
.indice li{
display:flex;gap:14px;align-items:baseline;justify-content:space-between;
padding:7px 0;
}
.indice .donde-sale{
font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-faint);white-space:nowrap;flex:none;
}
@media (max-width:600px){
.indice li{flex-direction:column;gap:2px}
.indice .donde-sale{margin-top:2px}
}
/* ---------------- despedida manuscrita ---------------- */
.despedida{padding-top:20px;margin-bottom:130px}
.despedida p{
font-family:var(--hand);font-weight:400;font-size:1.3rem;line-height:1.5;
color:var(--ink);max-width:34ch;transform:rotate(-.6deg);transform-origin:left center;
}
.despedida .firma{
font-weight:700;font-size:1.6rem;transform:rotate(-3deg);margin:18px 0 0 8px;
}
.despedida .correo{font-family:var(--hand);font-size:1.1rem;margin:2px 0 0 26px;transform:rotate(-1deg)}
/* ---------------- copy propuesto por Claudia, sin aprobar ---------------- */
.prop{position:relative}
.prop::after{
content:"\270E";position:absolute;left:-30px;top:2px;
font-size:1rem;color:var(--pencil);opacity:.55;
}
@media (max-width:900px){.prop::after{left:auto;right:0;top:-20px}}
/* ---------------- footer: lo legal y lo pequeño ---------------- */
footer{
width:var(--col);margin:0 auto;padding:34px 0 70px;position:relative;z-index:2;
font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
color:var(--ink-faint);line-height:2.1;
}
footer a{background-size:100px 8px;padding-bottom:3px}
footer .f-meta{margin:26px 0 0;opacity:.75}
/* ---------------- animación (se activa solo con JS) ---------------- */
@media (prefers-reduced-motion:no-preference){
.anim .trazo path,.anim .aro,.anim .servicio .fl path,.anim .ir .fl path,
.anim .arbol path,.anim .venn .aro-v{
stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s ease .05s}
.anim .go .trazo path,.anim .aro.go,.anim .go path,.anim .go .aro-v{stroke-dashoffset:0}
.anim .hl{background-size:0 100%;background-repeat:no-repeat;transition:background-size .6s ease}
.anim .hl.go{background-size:100% 100%}
}
/* ═══════════════════════════════════════════════════════════════════════════
Componentes que la home rev 8 no tenía y que la web sí necesita.
Siguen los criterios de la sección «Lo que la home no enseña» de DISENO.md,
aprobados por el usuario el 18-08. Nada de colores nuevos: solo variables
ya medidas para contraste AA.
═══════════════════════════════════════════════════════════════════════════ */
/* Selector de idioma. La home decidió vivir sin menú (J12), así que esto no es
una barra de navegación: es una anotación arriba a la derecha. */
.idiomas{
font-family:var(--hand); font-size:1.05rem; letter-spacing:.02em;
text-align:center; margin:0 0 22px;
}
.idiomas a, .idiomas span{ display:inline-block; padding:10px 6px; min-height:44px; line-height:24px }
.idiomas a{ margin:0 10px }
/* Zonas de servicio: las landings locales, como anotación bajo el servicio.
No son un menú ni una lista destacada — son el «también por aquí». */
.zonas{
font-family:var(--hand); font-size:15.5px; color:var(--ink-soft);
margin:-6px 0 14px;
}
.zonas a{ white-space:nowrap }
/* Pie: solo legales [CA11]. */
footer{ padding:48px 20px 60px; text-align:center }
.f-legal{ margin:0; max-width:none; font-size:15.5px; color:var(--ink-soft) }
/* Banner de cookies. Papel pegado abajo, no barra de sistema. */
.cookies{
position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
max-width:34rem; margin:0 auto; padding:20px 22px 8px;
background:var(--paper); color:var(--ink);
border:2px solid var(--ink); border-radius:2px;
box-shadow:4px 5px 0 rgba(42,38,34,.18);
transform:rotate(-.4deg);
}
.cookies[hidden]{ display:none }
.cookies p{ margin:0 0 10px; font-size:16px; max-width:none }
.cookies strong{ font-family:var(--hand); font-size:19px }
.cookies .boton{ margin:0 10px 12px 0 }
@media (prefers-reduced-motion:reduce){ .cookies{ transform:none } }
/* Foco visible. En los enlaces y botones, un recuadro rojo. En los campos del
formulario NO: un rectángulo recto alrededor de una caja dibujada a pulso
desentona. Ahí el foco se marca repintando en rojo el propio trazo de la
caja, así sigue exactamente su silueta (ver .form-libreta más abajo). */
a:focus-visible, button:focus-visible, summary:focus-visible{
outline:2.5px solid var(--red); outline-offset:3px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:none }
/* ═══════════════════════════════════════════════════════════════════════════
FORMULARIOS
Criterios de DISENO.md, sección «Lo que la home no enseña» (aprobados 18-08):
cajas dibujadas a mano en el mismo lenguaje que .boton, el texto que escribe
el visitante en Literata (lo manuscrito es de Sergi, no suyo), etiquetas en
Kalam 400, errores como anotación roja, áreas táctiles ≥44px y foco visible.
═══════════════════════════════════════════════════════════════════════════ */
.form-libreta{ max-width:34rem }
.form-libreta .campo{ margin:0 0 26px; max-width:none }
.form-libreta label,
.form-libreta legend{
display:block; font-family:var(--body); font-weight:600;
font-size:.95rem; color:var(--ink); margin:0 0 7px; line-height:1.4;
}
/* La caja: un rectángulo a pulso, con el trazo irregular del sistema.
Es el mismo recurso que .boton, pero como fondo, porque un no
admite un