/* ========================================================================== TAPISOL - hoja compartida por index.html y tienda.html Tema claro. Azul y naranja del logotipo. Degradado solo en titulares. ========================================================================== */ /* ---------- TIPOGRAFIAS ---------- Servidas desde el propio dominio, no desde Google. Cargarlas de fonts.gstatic.com mandaba la IP de cada visitante a un tercero en EE.UU. en cada visita, sin consentimiento; quitandolo, la web no comparte nada con nadie y la politica de privacidad puede decirlo de verdad. Ademas se ahorran dos conexiones que bloqueaban el pintado. Son las tres variables con el subconjunto latin (cubre el español entero): 81 KB las tres, frente a ocho ficheros estaticos. Se probaron Bricolage, Archivo, Instrument y Geist en septiembre de 2026 y se descartaron; para volver a probar, --f-tit y --f-txt de abajo son el unico sitio donde se nombra la pareja. */ @font-face{ font-family:'Sora'; src:url('fuentes/sora.woff2') format('woff2'); font-weight:600 700; font-style:normal; font-display:swap; } @font-face{ font-family:'Manrope'; src:url('fuentes/manrope.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; } @font-face{ font-family:'JetBrains Mono'; src:url('fuentes/jetbrains-mono.woff2') format('woff2'); font-weight:400 500; font-style:normal; font-display:swap; } :root{ --paper: #EDEBE4; --paper-2: #F6F5F1; --white: #FFFFFF; --navy: #16205F; --navy-900: #0D1440; --ink: #1B2145; --muted: #5D6787; --sun: #F7921E; /* #A85400 daba 4,48:1 sobre el papel y el minimo AA para texto pequeño es 4,5. Lo usan .eyebrow (11 px) y .pcat (10,9 px), asi que se oscurece lo justo para pasar: 4,69:1. A ojo es el mismo naranja. */ --sun-ink: #A45100; --red: #A32015; --green: #1F6B4A; /* El naranja puro sobre papel da 2:1. El extremo del degradado se oscurece hasta #C06A05 para que el titular sea legible de punta a punta. */ --grad: linear-gradient(96deg,#16205F 0%,#3A4FB5 44%,#C06A05 100%); --grad-dark: linear-gradient(96deg,#FFFFFF 0%,#FFD7A0 52%,#F7921E 100%); --line: rgba(22,32,95,.16); --line-2: rgba(22,32,95,.09); /* Una sola pareja de letras, declarada aqui: cambiarla es tocar dos lineas, no las veinte reglas que las usan. */ --f-tit: 'Sora', system-ui, sans-serif; --f-txt: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; /* Alto de la cabecera: lo leen el menu plegado y el indice de los legales. */ --hdr-h: 80px; --r: 6px; --pad: clamp(1.1rem, 4vw, 3.5rem); --maxw: 1320px; --ease: cubic-bezier(.22,.8,.3,1); color-scheme: light; } *{ box-sizing:border-box; } /* overflow-x:clip y NO hidden, y en el ademas del . El porque: iOS Safari calcula la escala inicial con el ancho del DOCUMENTO, no con el del body. Con el clip solo en body, un desbordamiento de 28 px -piezas fuera de pantalla, texto oculto que no envuelve- hacia que Safari encogiera la pagina al 93% para que cupiera, y quedaba una franja de papel a la derecha en el movil. En Chrome no se reproduce. `hidden` en el lo habria arreglado igual pero convierte la raiz en contenedor de scroll y rompe los `position:sticky` (la cabecera y el indice de los legales). `clip` recorta sin crear contenedor de scroll, que es justo lo que hace falta. Los navegadores que no lo entienden se quedan como estaban: la declaracion se ignora y sigue vigente el hidden del body. */ html{ scroll-behavior:smooth; overflow-x:clip; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-txt); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; /* Las dos, en este orden: quien no entienda `clip` se queda con `hidden`, que es lo que habia. Quien lo entienda evita ademas que el body sea contenedor de scroll, que es lo que puede estropear un sticky. */ overflow-x:hidden; overflow-x:clip; } h1,h2,h3{ margin:0; color:var(--navy-900); font-family:var(--f-tit); font-weight:600; letter-spacing:-.03em; line-height:1.14; } p{ margin:0; } a{ color:inherit; text-decoration:none; } /* height:auto o el atributo height del gana a los aspect-ratio de abajo: una foto 16:9 en una caja 4/3 sale con la altura del atributo. */ img{ max-width:100%; height:auto; display:block; } button,input,select,textarea{ font:inherit; color:inherit; } /* Cualquier regla de autor con display: gana al [hidden] del navegador, asi que un .btn o un .lb con hidden se seguian viendo. Se corta de raiz aqui. */ [hidden]{ display:none !important; } .mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } :focus-visible{ outline:2px solid var(--navy); outline-offset:2px; border-radius:var(--r); } /* clip-path ademas del clip clasico: `clip` esta obsoleto y Safari no siempre lo tiene en cuenta al medir el documento, y estos enlaces de album llevan nowrap, asi que sin recortar de verdad se estiran cientos de pixeles. */ .vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* Degradado de marca en la palabra clave del titular. El interlineado y el padding inferior dejan sitio a los rasgos descendentes (g, p, j). */ .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; line-height:1.2; padding-bottom:.08em; display:inline-block; } .on-dark .grad{ background:var(--grad-dark); -webkit-background-clip:text; background-clip:text; } @supports not ((background-clip:text) or (-webkit-background-clip:text)){ .grad{ color:var(--sun-ink); -webkit-text-fill-color:currentColor; } } /* ---------- BARRA SUPERIOR ---------- */ .top{ background:var(--navy-900); color:rgba(255,255,255,.8); font-size:.78rem; } .top .wrap{ display:flex; align-items:center; gap:1.25rem; height:34px; } .top a:hover{ color:var(--sun); } .top .end{ margin-left:auto; } @media (max-width:760px){ .top .hide-s{ display:none; } .top .wrap{ gap:.9rem; } } /* ---------- CABECERA ---------- */ .hdr{ position:sticky; top:0; z-index:60; height:var(--hdr-h); display:flex; align-items:center; gap:1.25rem; padding-inline:var(--pad); background:rgba(237,235,228,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-2); } .logo{ height:56px; width:auto; } .hdr nav{ margin-left:auto; } .hdr nav ul{ display:flex; gap:1.35rem; list-style:none; margin:0; padding:0; font-size:.85rem; font-weight:500; white-space:nowrap; } .hdr nav a{ color:var(--muted); padding-block:.2rem; border-bottom:1.5px solid transparent; transition:color .2s, border-color .2s; } .hdr nav a:hover{ color:var(--navy); border-color:var(--sun); } .hdr nav a[aria-current="page"]{ color:var(--navy-900); border-color:var(--sun); } .cart-btn{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .8rem; border:1px solid var(--line); border-radius:var(--r); background:var(--white); cursor:pointer; font-size:.82rem; font-weight:600; color:var(--navy); transition:border-color .2s; } .cart-btn:hover{ border-color:var(--navy); } .cart-btn .n{ min-width:18px; height:18px; padding-inline:4px; border-radius:9px; background:var(--sun); color:var(--navy-900); font-size:.7rem; font-weight:700; display:grid; place-items:center; } .burger{ display:none; background:none; border:1px solid var(--line); border-radius:var(--r); padding:.42rem .5rem; cursor:pointer; } .burger i{ display:block; width:17px; height:1.5px; background:var(--navy); } .burger i + i{ margin-top:4px; } @media (max-width:1040px){ .hdr{ gap:.7rem; } /* grid-template-rows en vez de max-height: anima sin recalcular layout cada frame. La visibilidad se apaga al cerrar para que los enlaces plegados no sigan siendo enfocables con el teclado. */ .hdr nav{ position:absolute; top:var(--hdr-h); left:0; right:0; margin:0; background:var(--paper-2); display:grid; grid-template-rows:0fr; visibility:hidden; border-bottom:1px solid var(--line-2); transition:grid-template-rows .35s var(--ease), visibility 0s linear .35s; } .hdr.open nav{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .35s var(--ease), visibility 0s; } .hdr nav ul{ flex-direction:column; gap:0; overflow:hidden; min-height:0; } .hdr nav a{ display:block; padding:.9rem var(--pad); border-bottom:1px solid var(--line-2); } .burger{ display:block; } .cart-btn{ margin-left:auto; } } /* ---------- BOTONES ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap; padding:.7rem 1.3rem; border-radius:var(--r); border:1px solid transparent; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .15s var(--ease); } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--navy); color:var(--white); } /* 8.2:1 */ .btn-primary:hover{ background:var(--navy-900); } .btn-outline{ border-color:var(--line); color:var(--navy); background:var(--white); } .btn-outline:hover{ border-color:var(--navy); } .btn-sun{ background:var(--sun); color:var(--navy-900); } /* 5.4:1 */ .btn-sun:hover{ background:#FFA835; } /* El botón que de verdad manda el pedido. Verde de WhatsApp con tinta casi negra: el blanco sobre este verde se queda en 1,9:1 y no se lee con sol. */ .btn-wa{ background:#25D366; color:#06281A; } .btn-wa:hover{ background:#1FBE5B; } .btn-wa svg{ width:19px; height:19px; flex:none; fill:currentColor; } /* Consultar por WhatsApp: boton de contorno con el icono en verde de marca. Se reconoce de que es sin robarle el sitio a "Añadir al carrito", que es el naranja y sigue siendo la accion principal de la ficha. */ .btn-consulta svg{ width:18px; height:18px; flex:none; fill:#25D366; } .btn-consulta:hover{ border-color:#25D366; } .btn-sm{ padding:.5rem .9rem; font-size:.82rem; } .btn:disabled{ opacity:.45; cursor:not-allowed; } .btn:disabled:active{ transform:none; } /* ---------- SECCIONES ---------- */ .sec{ padding-block:clamp(2.5rem,5.5vw,4.25rem); } .sec-alt{ background:var(--paper-2); border-block:1px solid var(--line-2); } .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(1.4rem,3vw,2.1rem); } .h2{ font-size:clamp(1.55rem,3.1vw,2.4rem); } .sub{ color:var(--muted); max-width:58ch; margin-top:.5rem; font-size:.97rem; } .eyebrow{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sun-ink); font-weight:700; } /* ---------- FRANJA DE RECLAMO ---------- */ .claim{ background:linear-gradient(96deg,var(--navy-900) 0%,var(--navy) 58%,#2E3A8E 100%); color:var(--white); text-align:center; padding:.85rem var(--pad); font-family:var(--f-tit); font-weight:600; letter-spacing:.02em; font-size:clamp(.8rem,1.3vw,1rem); } .claim b{ color:var(--sun); font-weight:600; } /* ---------- CAMPOS ---------- */ .field label{ display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; } .field input, .field textarea, .field select{ width:100%; padding:.6rem .75rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); } .field input:hover, .field textarea:hover, .field select:hover{ border-color:var(--navy); } .field .help{ font-size:.75rem; color:var(--muted); margin-top:.3rem; } .field .err{ font-size:.75rem; color:var(--red); margin-top:.3rem; display:none; } .field.invalid input, .field.invalid textarea, .field.invalid select{ border-color:var(--red); } .field.invalid .err{ display:block; } /* La casilla de aceptar: la etiqueta va al lado, no encima como en los demas. */ .acepto label{ display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; letter-spacing:0; text-transform:none; color:var(--muted); line-height:1.55; margin:0; cursor:pointer; } .acepto input{ flex:none; width:18px; height:18px; margin-top:.15rem; accent-color:var(--navy); } .acepto a{ color:var(--navy); font-weight:600; border-bottom:1.5px solid var(--sun); } .acepto.invalid label{ color:var(--red); } .acepto.invalid input{ outline:2px solid var(--red); outline-offset:2px; } .chips{ display:flex; flex-wrap:wrap; gap:.4rem; } .chip{ padding:.45rem .85rem; border:1px solid var(--line); border-radius:var(--r); background:var(--white); cursor:pointer; font-size:.85rem; color:var(--muted); transition:border-color .18s, color .18s, background .18s; } .chip:hover{ color:var(--navy); border-color:var(--navy); } .chip[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:var(--white); } .lbl{ display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem; } /* ---------- CARRITO (cajón lateral, compartido) ---------- */ .scrim{ position:fixed; inset:0; z-index:80; background:rgba(13,20,64,.45); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); } .scrim.on{ opacity:1; pointer-events:auto; } .cart{ /* Un solo sitio donde se decide el margen lateral del cajon: cabecera, lista y pie lo comparten, asi que en movil se aprieta con una linea. */ --cart-pad:1.25rem; position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(410px,92vw); background:var(--paper); border-left:1px solid var(--line); display:flex; flex-direction:column; transform:translateX(100%); visibility:hidden; transition:transform .35s var(--ease), visibility 0s linear .35s; } .cart.on{ transform:none; visibility:visible; transition:transform .35s var(--ease), visibility 0s; } .cart .ch{ display:flex; align-items:center; justify-content:space-between; padding:1.05rem var(--cart-pad); border-bottom:1px solid var(--line-2); } .cart .ch h2{ font-size:1.1rem; } .cart .x{ background:none; border:0; cursor:pointer; color:var(--muted); font-size:1.5rem; line-height:1; padding:.1rem .4rem; } .cart .x:hover{ color:var(--navy); } /* overscroll-behavior: al llegar al final de la lista, el gesto NO se lo lleva la pagina de detras. En iOS es la diferencia entre un cajon y un sitio raro. */ .cart ul{ list-style:none; margin:0; padding:0 var(--cart-pad); overflow-y:auto; overscroll-behavior:contain; flex:1; } .cart li{ display:grid; grid-template-columns:var(--th) minmax(0,1fr); gap:.85rem; --th:64px; padding-block:.9rem; border-bottom:1px solid var(--line-2); } .cart li.vacia{ display:block; border:0; } .cart .th{ width:var(--th); height:var(--th); object-fit:cover; border-radius:var(--r); border:1px solid var(--line-2); background:var(--paper-2); } .cart .li-txt{ min-width:0; } .cart .li-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.7rem; } .cart li b{ display:block; font-weight:600; font-size:.92rem; } .cart li .det{ display:block; font-size:.75rem; color:var(--muted); margin-top:.15rem; overflow-wrap:anywhere; } .cart li .imp{ font-family:var(--f-tit); font-weight:700; font-size:.95rem; white-space:nowrap; } .cart .li-bot{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:.6rem; } .cart .quitar{ background:none; border:0; padding:0; cursor:pointer; font-size:.75rem; color:var(--muted); text-decoration:underline; } .cart .quitar:hover{ color:var(--red); } .qty{ display:flex; align-items:center; gap:.15rem; flex:none; } .qty button{ width:26px; height:26px; border:1px solid var(--line); background:var(--white); border-radius:var(--r); cursor:pointer; color:var(--navy); line-height:1; } .qty button:hover{ border-color:var(--navy); } .qty span{ min-width:30px; text-align:center; font-size:.86rem; } .cart .empty{ padding:2.5rem 0; color:var(--muted); font-size:.9rem; text-align:center; } .cart .cf{ padding:1.1rem var(--cart-pad) calc(1.1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line-2); background:var(--paper-2); } .cart .tot{ display:flex; justify-content:space-between; align-items:baseline; } .cart .tot b{ font-family:var(--f-tit); font-size:1.3rem; } .cart .iva{ font-size:.74rem; color:var(--muted); margin-bottom:.85rem; } .cart .cf .btn{ width:100%; } .cart .cf .btn + .btn{ margin-top:.5rem; } .cart .note{ font-size:.74rem; color:var(--muted); margin-top:.6rem; text-align:center; } /* En movil el cajon ocupa la pantalla entera: la tira de fondo que quedaba a la izquierda no servia para nada y se comia el ancho justo donde menos sobra. Se cierra con la X, con Escape y tocando fuera cuando lo hay. */ @media (max-width:520px){ .cart{ --cart-pad:1rem; width:100%; border-left:0; } .cart li{ --th:56px; gap:.7rem; } .cart .qty button{ width:32px; height:32px; } /* dedo, no raton */ .cart .quitar{ padding:.35rem 0; } } /* ---------- PIE ---------- */ .ft{ background:var(--navy-900); color:rgba(255,255,255,.66); font-size:.85rem; } .ft .cols{ display:grid; grid-template-columns:1.3fr 1.1fr 1fr 1fr 1.15fr; gap:clamp(1.2rem,2.4vw,2.2rem); padding-block:clamp(2rem,4vw,3rem); } .ft h3{ color:var(--white); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.9rem; } .ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; } .ft a:hover{ color:var(--sun); } .ft .logo{ filter:brightness(0) invert(1); opacity:.9; height:38px; margin-bottom:.9rem; } .ft .legal{ border-top:1px solid rgba(255,255,255,.12); padding-block:1rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; } .ft-legal{ display:flex; gap:1.1rem; flex-wrap:wrap; } .ft-legal a{ border-bottom:1px solid rgba(255,255,255,.22); } @media (max-width:860px){ .ft .cols{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .ft .cols{ grid-template-columns:1fr; } } /* ---------- PAGINAS LEGALES (legal.html) ---------- Texto largo que se lee poco pero se consulta con prisa: columna estrecha, indice pegajoso arriba y las cosas que hay que ver si o si (el desistimiento de lo hecho a medida, que no hay cookies) en una caja con el naranja. */ .doc{ padding-block:clamp(2rem,4vw,3.25rem); max-width:78ch; } /* Se pega justo debajo de la cabecera, que mide 66 px fijos y va en z-index 60. */ .doc-indice{ position:sticky; top:var(--hdr-h); z-index:5; display:flex; flex-wrap:wrap; gap:.4rem; background:var(--paper); padding-block:.7rem; margin-bottom:.4rem; } /* Y los destinos bajan otro tanto, o el titular se mete debajo de las dos barras. */ .doc section{ scroll-margin-top:calc(var(--hdr-h) + 60px); } .doc-indice a{ padding:.4rem .8rem; border:1px solid var(--line); border-radius:var(--r); font-size:.8rem; font-weight:600; color:var(--navy); background:var(--white); } .doc-indice a:hover{ border-color:var(--navy); } .doc-fecha{ font-size:.78rem; color:var(--muted); margin-bottom:2rem; } .doc section{ padding-top:1.6rem; margin-top:2.4rem; border-top:1px solid var(--line); } .doc section:first-of-type{ border-top:0; margin-top:0; } .doc h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); } .doc h3{ font-size:1.02rem; margin-top:1.7rem; } .doc p, .doc li{ color:var(--muted); margin-top:.75rem; line-height:1.7; } .doc strong, .doc b{ color:var(--ink); } .doc ul{ margin:0; padding-left:1.1rem; } .doc a:not(.doc-indice a){ color:var(--navy); font-weight:600; border-bottom:1.5px solid var(--sun); } .doc-tabla{ width:100%; border-collapse:collapse; margin-top:1.1rem; font-size:.88rem; } .doc-tabla th, .doc-tabla td{ text-align:left; vertical-align:top; padding:.7rem .8rem; border:1px solid var(--line-2); } .doc-tabla th{ background:var(--paper-2); color:var(--ink); font-weight:600; white-space:nowrap; } .doc-tabla td{ color:var(--muted); } .doc-nota{ margin-top:1.2rem; padding:1rem 1.15rem; background:var(--white); border:1px solid var(--line-2); border-left:3px solid var(--sun); border-radius:var(--r); } @media (max-width:560px){ .doc-tabla, .doc-tabla tr, .doc-tabla th, .doc-tabla td{ display:block; width:100%; } .doc-tabla th{ border-bottom:0; } .doc-tabla td{ border-top:0; margin-bottom:.6rem; } } /* ---------- PAGINAS DE SERVICIO Y ZONAS ---------- Reusan .doc porque son lo mismo: texto largo en columna estrecha. Lo unico que cambia es que la galeria se sale de esa columna: 78ch esta bien para leer, no para mirar fotos. */ /* Con margenes negativos y no con transform: `.rv.in` ya usa transform para el revelado y una cosa pisaba a la otra. */ .servicio-pag .obras{ width:min(1100px, calc(100vw - 2 * var(--pad))); margin-inline:calc(50% - min(550px, (100vw - 2 * var(--pad)) / 2)); } .servicio-pag .faq{ margin-top:1.4rem; } .servicio-pag h2 + p, .servicio-pag h2 + ul{ margin-top:1rem; } /* La de zonas: el pueblo y los kilometros mandan, la nota acompaña. */ .zonas-tabla td:first-child{ color:var(--ink); white-space:nowrap; } .zonas-tabla td:nth-child(2){ white-space:nowrap; } @media (max-width:560px){ .zonas-tabla td:first-child, .zonas-tabla td:nth-child(2){ margin-bottom:0; } } /* ---------- ZONAS (SEO local) ---------- */ .zonas{ background:var(--paper-2); border-top:1px solid var(--line-2); font-size:.85rem; color:var(--muted); } .zonas .wrap{ padding-block:1.15rem; } .zonas b{ color:var(--navy-900); font-weight:600; } /* ---------- SONIDO ---------- */ .snd{ position:fixed; left:clamp(.85rem,2vw,1.5rem); bottom:clamp(.85rem,2vw,1.5rem); z-index:70; display:flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border:1px solid var(--line); border-radius:var(--r); background:var(--white); cursor:pointer; font-size:.78rem; color:var(--muted); transition:border-color .2s, color .2s; } .snd:hover, .snd[aria-pressed="true"]{ border-color:var(--navy); color:var(--navy); } /* ---------- BOTON FLOTANTE DE WHATSAPP ---------- Abajo a la derecha, enfrente del de sonido. En z-index 70, por debajo del velo (80): asi el carrito, el visor y la calculadora lo tapan cuando estan abiertos. El glifo va en verde casi negro, no en blanco: el blanco sobre este verde da 1,9:1 y un icono necesita 3:1. */ .wa-flota{ position:fixed; right:clamp(.85rem,2vw,1.5rem); bottom:clamp(.85rem,2vw,1.5rem); z-index:70; width:58px; height:58px; display:grid; place-items:center; background:#25D366; border-radius:50%; box-shadow:0 6px 20px rgba(37,211,102,.42), 0 2px 8px rgba(13,20,64,.18); opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease), background .2s, box-shadow .2s; } .wa-flota.on{ opacity:1; transform:none; pointer-events:auto; } .wa-flota:hover, .wa-flota:focus-visible{ background:#1FBE5B; transform:translateY(-3px); box-shadow:0 10px 26px rgba(37,211,102,.5), 0 2px 8px rgba(13,20,64,.2); } .wa-flota svg{ width:31px; height:31px; fill:#06281A; } @media (prefers-reduced-motion:reduce){ .wa-flota{ transition:opacity .3s; transform:none; } .wa-flota:hover, .wa-flota:focus-visible{ transform:none; } } @media (max-width:480px){ .wa-flota{ width:52px; height:52px; } .wa-flota svg{ width:28px; height:28px; } } .eq{ display:flex; align-items:flex-end; gap:2px; height:11px; } .eq i{ width:2px; height:2px; background:currentColor; display:block; } .snd[aria-pressed="true"] .eq i{ animation:eq .9s ease-in-out infinite; } .eq i:nth-child(2){ animation-delay:.15s; } .eq i:nth-child(3){ animation-delay:.3s; } @keyframes eq{ 0%,100%{ height:2px; } 50%{ height:11px; } } /* ---------- REVELADO ---------- */ .rv{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); } .rv.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .rv{ opacity:1; transform:none; } } /* ========================================================================== SOLO PORTADA (index.html) ========================================================================== */ .hero{ position:relative; } .hero-video{ position:relative; width:100%; height:clamp(300px,52vh,520px); overflow:hidden; background:var(--navy-900); } /* 23% y no 38%: a 1920 la banda solo ve 524 de las 768 filas del video, y al 38% caia sobre los balcones. Al 23% entran a la vez el rotulo TAPISOL de arriba, los carteles blancos y los toldos con la marca, y la furgoneta queda fuera (lleva mal el telefono). Si tocas este numero, comprueba a 1920 de ancho. */ .hero-video video{ width:100%; height:100%; object-fit:cover; object-position:50% 23%; } .hero-video::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(13,20,64,.55) 0%, rgba(13,20,64,.18) 34%, rgba(13,20,64,0) 54%); } /* La tarjeta flota sobre el video en vez de ir pegada a la esquina: separada de los dos bordes y con sombra propia, para que no parezca la continuacion de la franja azul de abajo. La sombra va tintada de azul marino, no de negro, o sobre el papel calido sale gris sucia. */ .hero-card{ position:absolute; z-index:2; left:var(--pad); bottom:clamp(1.4rem, 4vh, 2.8rem); max-width:clamp(320px, 32%, 500px); padding:1rem 1.15rem 1.1rem; background:var(--paper); /* Redondeo propio, el doble que el resto: es la unica pieza que flota y la esquina de fuera tiene que ser mas abierta que la de los botones que lleva dentro. Al reves canta. */ border-radius:12px; border-top:3px solid var(--sun); box-shadow:0 22px 45px -14px rgba(13,20,64,.5), 0 3px 10px rgba(13,20,64,.14); /* Entra sola al cargar y despues respira. Las dos animaciones conviven porque cada una toca una propiedad distinta: la de entrada, translate; la de flotar, un translate propio encadenado detras con delay. */ animation:hero-entra .6s var(--ease) .05s both, hero-flota 7s ease-in-out .8s infinite; will-change:transform; } @keyframes hero-entra{ from{ opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes hero-flota{ 0%,100%{ transform:translateY(0); } 50% { transform:translateY(-7px); } } .hero-card h1{ font-size:clamp(1.3rem,2.05vw,1.9rem); } .hero-card p{ margin-top:.4rem; color:var(--muted); font-size:.88rem; line-height:1.45; } .hero-card .row{ margin-top:.8rem; display:flex; gap:.45rem; flex-wrap:wrap; } .hero-card .btn{ padding:.55rem 1rem; font-size:.87rem; } @media (max-width:700px){ .hero-video{ height:clamp(220px,34vh,320px); } /* En movil vuelve a ser un bloque normal debajo del video: flotando ocuparia media pantalla y taparia la obra. */ .hero-card{ position:static; max-width:none; padding:1.25rem var(--pad) 1.5rem; border-radius:0; box-shadow:none; animation:hero-entra .6s var(--ease) both; } .hero-video::after{ background:linear-gradient(to top, rgba(13,20,64,.28), rgba(13,20,64,0) 55%); } } .intro{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; } .intro figure{ margin:0; } .intro img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); } .intro .txt p{ color:var(--muted); } .intro .txt p + p{ margin-top:.8rem; } .intro .row{ margin-top:1.4rem; display:flex; gap:.6rem; flex-wrap:wrap; } @media (max-width:860px){ .intro{ grid-template-columns:1fr; } .intro figure{ order:-1; } } /* Servicios: las dos patas del negocio, sin nada de comprar. */ .servicios{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .servicio{ background:var(--white); border:1px solid var(--line-2); border-radius:var(--r); padding:clamp(1.25rem,2.5vw,1.85rem); border-top:3px solid var(--sun); } .servicio h3{ font-size:1.2rem; } .servicio p{ color:var(--muted); font-size:.92rem; margin-top:.5rem; } .servicio ul{ margin:1rem 0 0; padding:0; list-style:none; display:grid; gap:.4rem; font-size:.88rem; } .servicio li{ padding-left:1.1rem; position:relative; } .servicio li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:2px; background:var(--sun); } @media (max-width:800px){ .servicios{ grid-template-columns:1fr; } } .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2.5rem); } .steps .n{ font-family:var(--f-tit); font-weight:700; font-size:.8rem; flex:none; width:26px; height:26px; display:grid; place-items:center; background:var(--sun); color:var(--navy-900); border-radius:var(--r); } .steps h3{ font-size:1rem; display:flex; align-items:center; gap:.6rem; } .steps p{ color:var(--muted); font-size:.9rem; margin-top:.4rem; padding-left:calc(26px + .6rem); } @media (max-width:800px){ .steps{ grid-template-columns:1fr; gap:1.1rem; } } .about{ display:grid; grid-template-columns:1fr .8fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; } @media (max-width:860px){ .about{ grid-template-columns:1fr; } } .about .txt p{ color:var(--muted); } .about .txt p + p{ margin-top:.8rem; } .about .aside{ display:grid; gap:clamp(.9rem,2vw,1.2rem); } .about .aside figure{ margin:0; } .about .aside img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); } .about .aside figcaption{ margin-top:.5rem; font-size:.82rem; color:var(--muted); } .about .aside figcaption::before{ display:none; } /* la rayita naranja es solo de la rejilla */ .nums{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; } .nums div{ background:var(--paper-2); padding:1.1rem 1.2rem; } .nums b{ display:block; font-family:var(--f-tit); font-size:1.8rem; font-weight:700; color:var(--navy-900); line-height:1; } .nums span{ display:block; font-size:.8rem; color:var(--muted); margin-top:.35rem; } /* ---------- Galeria de obras ---------- Rejilla lisa, sin cajas ni sombras: la foto es el contenido y cualquier marco le quita sitio. La chapa de "3 fotos" es la unica pista de que una obra tiene album; las que van solas abren el visor con una sola imagen. */ .obras{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,2vw,1.35rem); } /* La primera obra ocupa dos huecos: con 8 fotos cuadra el 3x3 y de paso la rejilla deja de ser ocho tarjetas identicas. */ @media (min-width:901px){ .obras .obra:first-child{ grid-column:span 2; } .obras .obra:first-child img{ aspect-ratio:16/9; } } @media (max-width:900px){ .obras{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .obras{ grid-template-columns:1fr; } } .obra{ margin:0; } .obra-foto{ position:relative; display:block; overflow:hidden; border-radius:var(--r); background:var(--line-2); } .obra-foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .5s var(--ease); } .obra-foto::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top,rgba(13,20,64,.5),transparent 45%); opacity:0; transition:opacity .35s var(--ease); } .obra-foto:hover img,.obra-foto:focus-visible img{ transform:scale(1.04); } .obra-foto:hover::after,.obra-foto:focus-visible::after{ opacity:1; } .obra-n{ position:absolute; z-index:2; left:.6rem; bottom:.6rem; padding:.3rem .55rem; font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; background:var(--paper); color:var(--navy-900); border-radius:var(--r); } .obra figcaption{ margin-top:.6rem; font-size:.85rem; color:var(--muted); } .obra figcaption::before{ content:''; display:block; width:22px; height:2px; background:var(--sun); margin-bottom:.5rem; } /* ---------- Visor de fotos ---------- */ .lb{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:clamp(.7rem,3vw,2.2rem); background:rgba(9,13,40,.95); opacity:0; transition:opacity .28s var(--ease); } .lb.on{ opacity:1; } .lb figure{ margin:0; display:grid; gap:.8rem; justify-items:center; max-width:min(1180px,100%); } .lb img{ max-width:100%; max-height:72vh; object-fit:contain; border-radius:var(--r); transition:opacity .2s linear; } .lb.cargando img{ opacity:.3; } .lb figcaption{ color:rgba(255,255,255,.85); font-size:.9rem; text-align:center; max-width:62ch; } .lb-n{ color:var(--sun); margin-left:.55rem; } .lb button{ position:absolute; display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(255,255,255,.28); border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease); } .lb button:hover{ background:rgba(255,255,255,.2); } .lb button:active{ transform:scale(.94); } .lb-x{ top:clamp(.7rem,2vw,1.4rem); right:clamp(.7rem,2vw,1.4rem); } .lb-prev{ left:clamp(.4rem,2vw,1.6rem); top:50%; margin-top:-23px; } .lb-next{ right:clamp(.4rem,2vw,1.6rem); top:50%; margin-top:-23px; } @media (max-width:560px){ .lb img{ max-height:64vh; } .lb-prev{ left:.5rem; } .lb-next{ right:.5rem; } } /* Con pocas obras, en pantalla ancha una rejilla llena mejor que un carril a medias. */ @media (min-width:900px){ } .trust{ background:linear-gradient(140deg,var(--navy-900),var(--navy)); color:var(--white); } .trust .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,3vw,3rem); padding-block:clamp(1.75rem,3.5vw,2.5rem); } .trust h3{ color:var(--white); font-size:1rem; } .trust h3::before{ content:''; display:block; width:24px; height:2px; background:var(--sun); margin-bottom:.7rem; } .trust p{ color:rgba(255,255,255,.72); font-size:.88rem; margin-top:.4rem; } @media (max-width:800px){ .trust .wrap{ grid-template-columns:1fr; gap:1.25rem; } } /* Llamada a la tienda: el único punto de la portada que habla de comprar. */ .cta-tienda{ background:var(--white); border-block:1px solid var(--line-2); } .cta-tienda .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-block:clamp(1.75rem,3.5vw,2.5rem); } .cta-tienda h2{ font-size:clamp(1.3rem,2.4vw,1.9rem); } .cta-tienda p{ color:var(--muted); font-size:.93rem; margin-top:.4rem; max-width:52ch; } .faq{ max-width:78ch; } .faq details{ border-bottom:1px solid var(--line-2); } .faq summary{ cursor:pointer; padding:.95rem 0; font-family:var(--f-tit); font-weight:600; color:var(--navy-900); font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:'+'; color:var(--sun-ink); font-size:1.2rem; line-height:1; flex:none; } .faq details[open] summary::after{ content:'\2212'; } .faq p{ color:var(--muted); font-size:.92rem; padding-bottom:1rem; } .contact{ display:grid; grid-template-columns:1fr .85fr; gap:clamp(1.5rem,4vw,3.5rem); } @media (max-width:800px){ .contact{ grid-template-columns:1fr; } } .contact form{ display:grid; gap:.9rem; } /* ---------- Botón de WhatsApp ---------- Verde de marca de WhatsApp, pero con el texto en verde casi negro: el blanco sobre #25D366 se queda en 1,9:1 y no se lee. Así pasa de sobra y sigue reconociéndose a un metro. El halo late despacio para llamar sin marear. */ .wa{ position:relative; display:inline-flex; align-items:center; gap:1rem; margin-top:1.7rem; padding:1.1rem 1.8rem 1.1rem 1.15rem; background:#25D366; color:#06281A; border-radius:calc(var(--r) + 3px); box-shadow:0 8px 26px rgba(37,211,102,.34); transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease); } .wa:hover, .wa:focus-visible{ background:#1FBE5B; transform:translateY(-2px); box-shadow:0 12px 32px rgba(37,211,102,.45); } .wa:active{ transform:translateY(0) scale(.99); } /* El halo: dos anillos que salen del botón y se desvanecen. */ .wa-halo{ position:absolute; inset:0; border-radius:inherit; z-index:0; background:#25D366; opacity:.5; pointer-events:none; animation:wa-late 2.6s var(--ease) infinite; } .wa-halo::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:inherit; animation:wa-late 2.6s var(--ease) infinite 1.3s; } @keyframes wa-late{ 0% { transform:scale(1); opacity:.45; } 70% { transform:scale(1.13); opacity:0; } 100% { transform:scale(1.13); opacity:0; } } .wa-ico{ flex:none; width:54px; height:54px; display:grid; place-items:center; background:var(--white); border-radius:50%; } .wa-ico svg{ width:31px; height:31px; fill:#25D366; } .wa-txt{ display:grid; gap:.15rem; } .wa-txt b{ font-family:var(--f-tit); font-size:1.18rem; font-weight:700; letter-spacing:-.015em; } .wa-txt small{ font-size:.83rem; opacity:.8; } .wa-flecha{ flex:none; display:grid; place-items:center; width:22px; height:22px; margin-left:.3rem; } .wa-flecha svg{ width:22px; height:22px; transition:transform .22s var(--ease); } .wa:hover .wa-flecha svg{ transform:translateX(4px); } .wa-pie{ margin-top:.8rem; font-size:.83rem; color:var(--muted); max-width:46ch; } /* Sin animación para quien la haya desactivado en su sistema. */ @media (prefers-reduced-motion:reduce){ .wa-halo, .wa-halo::after{ animation:none; opacity:0; } .wa, .wa-flecha svg{ transition:none; } .wa:hover{ transform:none; } } @media (max-width:480px){ /* A lo ancho del movil, y el rotulo cabe en una linea si se afina un poco. */ .wa{ width:100%; gap:.8rem; padding:.95rem 1.1rem .95rem 1rem; } .wa-ico{ width:46px; height:46px; } .wa-ico svg{ width:26px; height:26px; } .wa-txt b{ font-size:1.02rem; } .wa-txt small{ font-size:.78rem; } .wa-flecha{ margin-left:auto; } } .data{ display:grid; gap:1.1rem; align-content:start; border-left:1px solid var(--line-2); padding-left:clamp(1.25rem,3vw,2.5rem); } @media (max-width:800px){ .data{ border-left:0; padding-left:0; border-top:1px solid var(--line-2); padding-top:1.5rem; } } .data .k{ display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.15rem; } .data a{ font-size:1.08rem; font-weight:600; color:var(--navy-900); border-bottom:1.5px solid transparent; transition:border-color .2s; } .data a:hover{ border-color:var(--sun); } /* ========================================================================== SOLO TIENDA (tienda.html) ========================================================================== */ .tienda-head{ background:var(--paper-2); border-bottom:1px solid var(--line-2); padding-block:clamp(1.75rem,3.5vw,2.75rem); } .tienda-head h1{ font-size:clamp(1.8rem,3.4vw,2.6rem); } .tienda-head p{ color:var(--muted); margin-top:.5rem; max-width:62ch; } .miga{ font-size:.78rem; color:var(--muted); margin-bottom:.6rem; } .miga a:hover{ color:var(--navy); } .shop{ display:grid; grid-template-columns:230px 1fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start; padding-block:clamp(1.75rem,3.5vw,2.75rem); } @media (max-width:900px){ .shop{ grid-template-columns:1fr; } } .filtros{ position:sticky; top:82px; } @media (max-width:900px){ .filtros{ position:static; } } .filtros h2{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem; } .filtros ul{ list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; } .filtros button{ width:100%; text-align:left; background:var(--white); border:0; cursor:pointer; padding:.65rem .9rem; font-size:.87rem; color:var(--muted); display:flex; justify-content:space-between; gap:.5rem; transition:background .18s, color .18s; } .filtros button:hover{ color:var(--navy); background:var(--paper-2); } .filtros button[aria-pressed="true"]{ background:var(--navy); color:var(--white); font-weight:600; } .filtros button span{ opacity:.6; font-size:.78rem; } .filtros .aviso{ font-size:.76rem; color:var(--muted); border-left:2px solid var(--sun); padding-left:.7rem; } .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; } .pcard{ background:var(--white); border:1px solid var(--line-2); border-radius:var(--r); display:flex; flex-direction:column; overflow:hidden; transition:border-color .2s, transform .2s var(--ease); } .pcard:hover{ border-color:var(--line); transform:translateY(-2px); } .pmedia{ aspect-ratio:4/3; background:linear-gradient(#FBFAF7,#EFEDE6); display:grid; place-items:center; border-bottom:1px solid var(--line-2); position:relative; } .pmedia svg{ width:100%; height:100%; } /* Tapicería: sin fotos todavía, la tarjeta enseña el tejido en sí. TODO: sustituir por fotos reales de trabajos de tapicería de Fran. */ .pmedia.fab{ background-image:repeating-linear-gradient(135deg,var(--f1) 0 14px,var(--f2) 14px 28px); } .tag{ position:absolute; top:.6rem; left:.6rem; z-index:1; background:var(--navy); color:var(--white); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .5rem; border-radius:var(--r); } .tag.env{ background:var(--green); } .pbody{ padding:.95rem 1.05rem 1.05rem; display:flex; flex-direction:column; flex:1; } .pcat{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sun-ink); font-weight:700; } .pbody h3{ font-size:1rem; margin-top:.25rem; } .pbody .desc{ color:var(--muted); font-size:.85rem; margin-top:.35rem; flex:1; } .prow{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-top:.95rem; } .price{ font-family:var(--f-tit); font-weight:700; font-size:1.05rem; color:var(--navy-900); white-space:nowrap; } .price small{ display:block; font-family:var(--f-txt); font-weight:500; font-size:.68rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; } /* Accesorios: sin foto de producto, la tarjeta va a lo suyo con un filete naranja. */ .pcard.slim .pbody{ border-top:3px solid var(--sun); } /* ---------- MODAL DE PRODUCTO (la calculadora) ---------- */ .modal{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:clamp(.5rem,3vw,2rem); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility 0s linear .25s; } .modal.on{ opacity:1; visibility:visible; transition:opacity .25s var(--ease), visibility 0s; } .modal-bg{ position:absolute; inset:0; background:rgba(13,20,64,.5); } .modal-box{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); width:min(980px,100%); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; transform:translateY(12px); transition:transform .25s var(--ease); } .modal.on .modal-box{ transform:none; } .modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem; border-bottom:1px solid var(--line-2); } .modal-head h2{ font-size:1.2rem; } .modal-head p{ font-size:.84rem; color:var(--muted); margin-top:.2rem; } .modal-body{ overflow-y:auto; display:grid; grid-template-columns:1.05fr .95fr; } @media (max-width:820px){ .modal-body{ grid-template-columns:1fr; } } /* El dibujo se queda a la vista mientras se baja por el formulario. Antes iba centrado (place-items:center) en una columna que el grid estira hasta la altura del formulario: con los tejidos desplegados eran 1.500 px, asi que el toldo quedaba centrado a 750 y no se veia al abrir la ficha. Justo el dibujo que cambia de color al elegir la lona. La columna se sigue estirando -es la que lleva el fondo y la linea divisoria- pero el contenido se pega arriba y el hijo va sticky. El top no es 0 sino el padding, o al pegarse se comeria el aire de arriba. */ .modal-view{ background:linear-gradient(#FBFAF7,#F1EFE9); border-right:1px solid var(--line-2); padding:1.25rem; display:grid; justify-items:center; align-content:start; min-height:220px; } .modal-view > *{ position:sticky; top:1.25rem; } @media (max-width:820px){ .modal-view{ border-right:0; border-bottom:1px solid var(--line-2); } } .modal-form{ padding:1.25rem; } .ctrl + .ctrl{ margin-top:1.25rem; } .dims{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } .awning{ width:100%; max-width:460px; display:block; } /* Selector de tejido: 166 referencias reales, con pestañas por familia y buscador. La rejilla se limita en alto y hace su propio scroll. */ .tejfilt{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.65rem; } .tejfilt .chips{ flex:1 1 auto; } .tejfilt .chip span{ opacity:.55; margin-left:.25rem; font-size:.75em; } .tejfilt input{ flex:1 1 170px; min-width:0; padding:.5rem .7rem; font:inherit; font-size:.85rem; border:1px solid var(--line); border-radius:var(--r); background:var(--white); color:var(--ink); } .tejfilt input:focus-visible{ outline:2px solid var(--navy); outline-offset:1px; } .swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:.4rem; max-height:232px; overflow-y:auto; padding-right:.2rem; } .sw{ aspect-ratio:1; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; padding:0; overflow:hidden; transition:box-shadow .18s, border-color .18s; } .sw:hover{ border-color:var(--navy); } .sw[aria-pressed="true"]{ border-color:var(--navy); box-shadow:0 0 0 2px var(--navy); } .sw i{ display:block; width:100%; height:100%; background-size:cover; background-position:center; } /* Ficha técnica y descargas del producto */ .ficha{ margin-top:1.25rem; border-top:1px solid var(--line-2); padding-top:.9rem; } .ficha .largo{ color:var(--muted); font-size:.9rem; line-height:1.6; } .specs{ margin:.9rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:0; font-size:.85rem; } .specs dt{ color:var(--muted); padding:.42rem .9rem .42rem 0; border-top:1px solid var(--line-2); white-space:nowrap; } .specs dd{ margin:0; padding:.42rem 0; border-top:1px solid var(--line-2); color:var(--ink); } .docs{ list-style:none; margin:.45rem 0 0; padding:0; display:grid; gap:.35rem; } .docs a{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.55rem .7rem; border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper-2); color:var(--navy-900); text-decoration:none; font-size:.85rem; transition:border-color .18s var(--ease), background .18s var(--ease); } .docs a:hover{ border-color:var(--sun); background:var(--white); } .docs a span{ color:var(--muted); font-size:.72rem; white-space:nowrap; } @media (max-width:520px){ .specs{ grid-template-columns:1fr; } .specs dd{ border-top:0; padding-top:0; } } .desglose{ margin-top:1.25rem; border-top:1px solid var(--line-2); padding-top:.9rem; } .desglose dl{ margin:0; display:grid; grid-template-columns:1fr auto; gap:.3rem .8rem; font-size:.85rem; } .desglose dt{ color:var(--muted); } .desglose dd{ margin:0; text-align:right; } .desglose .fin{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line-2); } .desglose .fin b{ font-family:var(--f-tit); font-size:1.5rem; } .modal-foot{ padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line-2); background:var(--paper-2); display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; } .modal-foot .tot-box{ display:flex; flex-direction:column; margin-right:auto; } .modal-foot .tot-box span{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .modal-foot .tot-box b{ font-family:var(--f-tit); font-size:1.5rem; line-height:1.1; color:var(--navy-900); } .modal-foot .btn{ flex:1; min-width:170px; } @media (max-width:560px){ .modal-foot .tot-box{ flex-basis:100%; margin-right:0; flex-direction:row; align-items:baseline; justify-content:space-between; } } .modal-foot .aviso{ font-size:.74rem; color:var(--muted); flex-basis:100%; } /* ---------- CHECKOUT ---------- */ .checkout{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,3vw,3rem); align-items:start; } @media (max-width:860px){ .checkout{ grid-template-columns:1fr; } } .checkout form{ display:grid; gap:.9rem; } .dos{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; } @media (max-width:520px){ .dos{ grid-template-columns:1fr; } } .resumen{ background:var(--white); border:1px solid var(--line-2); border-radius:var(--r); padding:1.25rem; position:sticky; top:82px; } @media (max-width:860px){ .resumen{ position:static; } } .resumen h3{ font-size:1.05rem; margin-bottom:.9rem; } .resumen ul{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.8rem; font-size:.86rem; } .resumen li{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:.7rem; align-items:start; } .resumen .r-top{ display:flex; justify-content:space-between; gap:.7rem; } .resumen .r-top b{ white-space:nowrap; } .resumen li span{ display:block; color:var(--muted); } .resumen li .det{ font-size:.76rem; margin-top:.1rem; overflow-wrap:anywhere; } .resumen .th{ width:48px; height:48px; object-fit:cover; border-radius:var(--r); border:1px solid var(--line-2); background:var(--paper-2); } .resumen .linea{ display:flex; justify-content:space-between; font-size:.88rem; padding-top:.7rem; border-top:1px solid var(--line-2); } .resumen .final{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line); } .resumen .final b{ font-family:var(--f-tit); font-size:1.5rem; } .pagos{ display:grid; gap:.5rem; margin-top:.6rem; } .pago{ display:flex; align-items:flex-start; gap:.7rem; padding:.8rem .9rem; cursor:pointer; border:1px solid var(--line); border-radius:var(--r); background:var(--white); transition:border-color .18s; } .pago:hover{ border-color:var(--navy); } .pago:has(input:checked){ border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); } .pago input{ margin-top:.28rem; accent-color:var(--navy); } .pago b{ display:block; font-size:.9rem; font-weight:600; } .pago span{ display:block; font-size:.78rem; color:var(--muted); margin-top:.1rem; } /* Hueco reservado para los botones de PayPal, hasta que haya client-id. */ #paypal-box{ margin-top:.9rem; border:1px dashed var(--line); border-radius:var(--r); padding:1rem; text-align:center; font-size:.8rem; color:var(--muted); } .ok-box{ background:var(--white); border:1px solid var(--line-2); border-top:3px solid var(--green); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.25rem); max-width:62ch; } .ok-box h2{ font-size:1.4rem; } .ok-box p{ color:var(--muted); margin-top:.6rem; } .ok-box .btn{ margin-top:1.25rem; } /* Las dos salidas de socorro: WhatsApp bloqueado por el navegador, o sin WhatsApp. */ .ok-box .ok-ojo{ margin-top:1.5rem; font-size:.88rem; } .ok-box .ok-ojo a{ color:var(--navy); font-weight:600; border-bottom:1.5px solid var(--sun); } .ok-box .ok-ojo + .btn{ margin-top:.7rem; } /* ---------- Muestras de tejido en la portada ---------- Rejilla estática de 18 colores reales de las cartas SAULEDA. Las 166 referencias están en el configurador de la tienda. */ .tejlista{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(.5rem,1.5vw,.9rem); grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); } .tejlista li{ font-size:.78rem; } .tejlista img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r); } .tejlista b{ display:block; margin-top:.4rem; color:var(--navy-900); font-weight:600; } .tejlista span{ color:var(--muted); font-size:.72rem; } .tejpie{ margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--line-2); color:var(--muted); font-size:.87rem; line-height:1.7; } .tejpie b{ color:var(--navy-900); } .tejpie a{ color:var(--navy); } /* Las fotos de accesorios son recortes sobre blanco: van con aire alrededor y en 'contain', no recortadas. ponytail: cuando entren fotos de escena (un toldo montado) haran falta las dos variantes. */ .pmedia.foto{ background:var(--white); padding:8%; } .pmedia.foto img{ width:100%; height:100%; object-fit:contain; } /* Foto de escena (un toldo montado): llena la tarjeta, sin aire ni fondo. */ .pmedia.foto.escena{ padding:0; background:none; } .pmedia.foto.escena img{ object-fit:cover; } /* El titulo de la tarjeta abre la ficha del producto. */ .pbody h3 .titlnk{ border:0; background:none; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer; border-bottom:1px solid transparent; transition:border-color .18s var(--ease); } .pbody h3 .titlnk:hover{ border-bottom-color:var(--sun); }