/* ========================================================================== mw.css — Mini-webs públicas de seshospedajes.es -------------------------------------------------------------------------- CSS propio, sin frameworks, sin JS y sin una sola petición externa. POR QUÉ ASÍ, Y NO CON GSAP Y TIPOGRAFÍAS DE GOOGLE --------------------------------------------------- Estas páginas son transaccionales: el visitante viene a mirar fechas y a reservar. La regla de oro del diseño premiado es que cuanto más transaccional es una web, menos mecanismos lleva — Brunello Cucinelli ganó Site of the Day siendo e-commerce de lujo declarando solo HTML5. Y el visitante típico de esto está mirando una casa rural desde el móvil con dos rayas de cobertura. Así que todo el trabajo está donde no pesa: tipografía, ritmo, color y contención. Cero webfonts (una WOFF2 son 30 KB y un FOUT en el titular), cero librerías, cero peticiones a terceros. Las animaciones son `animation-timeline: view()`, que es CSS nativo: donde no está soportado simplemente no hay animación y la página se ve igual de bien. LAS CUATRO PLANTILLAS --------------------- Son temas de color y tipografía sobre el MISMO HTML. Se aplican con `data-plantilla` en . Tres de las cuatro paletas están tomadas de webs premiadas reales: editorial #FAF7EF / #131313 Siena Film Foundation (SOTM 3/2025) calida #F2EAE0 / #2C2824 #A89474 Son Daven (SOTM 6/2026, hostelería) noche #0F0F0F / #E4D5BE RISK (SOTD 7/2026) costa #EDF2F4 / #1F3A47 #5B8FA8 compuesta Ninguna usa #000 con #fff: el off-blanco cremoso es lo que distingue el acabado caro del acabado por defecto. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* Tipografía. Pilas del sistema: 0 KB, 0 peticiones, 0 FOUT. La serif de sistema (Iowan/Palatino/Georgia) tiene mucho más carácter que Georgia sola y está en prácticamente todo. */ --mw-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --mw-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mw-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Por defecto manda la plantilla; esto es el respaldo. */ --mw-display: var(--mw-serif); --mw-texto-ff: var(--mw-sans); /* Escala fluida. El salto entre display y cuerpo es de más de 4:1, que es donde empieza a leerse como jerarquía y no como "texto un poco más grande". */ --mw-t-display: clamp(2.6rem, 7.5vw, 5.5rem); --mw-t-h2: clamp(1.35rem, 2.4vw, 1.9rem); --mw-t-cuerpo: clamp(1rem, 1.05vw, 1.125rem); --mw-t-meta: 0.75rem; /* Ritmo. El aire es lo que hace que algo parezca caro. */ --mw-aire: clamp(3.5rem, 9vh, 8rem); --mw-margen: clamp(1.25rem, 5vw, 5rem); --mw-hueco: clamp(1.25rem, 2.5vw, 2rem); --mw-radio: 14px; --mw-radio-s: 8px; /* Motion. Nunca `ease` ni `linear` salvo en giros continuos. */ --mw-ease: cubic-bezier(0.16, 1, 0.3, 1); --mw-rapido: 200ms; --mw-lento: 700ms; /* Colores: los pone cada plantilla. Aquí, Editorial como respaldo. */ --mw-fondo: #FAF7EF; --mw-tinta: #131313; --mw-suave: #6b6b66; --mw-borde: #dedad0; --mw-tarjeta: #ffffff; --mw-acento: #131313; --mw-sobre-acento: #FAF7EF; --mw-libre-bg: #e8ede4; --mw-libre-tx: #3f5340; --mw-ocup-bg: #eee2e0; --mw-ocup-tx: #7d4a44; } /* -------------------------------------------------------------------------- 2. LAS CUATRO PLANTILLAS -------------------------------------------------------------------------- */ /* --- Editorial · negro sobre crema. La pareja más elegante del catálogo. --- */ [data-plantilla="editorial"] { --mw-display: var(--mw-serif); --mw-fondo: #FAF7EF; --mw-tinta: #131313; --mw-suave: #6b6b66; --mw-borde: #dedad0; --mw-tarjeta: #ffffff; --mw-acento: #131313; --mw-sobre-acento: #FAF7EF; --mw-libre-bg: #e8ede4; --mw-libre-tx: #3f5340; --mw-ocup-bg: #eee2e0; --mw-ocup-tx: #7d4a44; } /* --- Cálida · tostado sobre marrón. Son Daven, hostelería en los Cárpatos. --- */ [data-plantilla="calida"] { --mw-display: var(--mw-serif); --mw-fondo: #F2EAE0; --mw-tinta: #2C2824; --mw-suave: #7d7264; --mw-borde: #ddd0bf; --mw-tarjeta: #FBF6EF; --mw-acento: #A08258; --mw-sobre-acento: #FBF6EF; --mw-libre-bg: #e6e5d5; --mw-libre-tx: #4d5138; --mw-ocup-bg: #eddcd2; --mw-ocup-tx: #8a5340; } /* --- Noche · crema cálida sobre casi-negro. RISK. --- */ [data-plantilla="noche"] { --mw-display: var(--mw-sans); --mw-fondo: #0F0F0F; --mw-tinta: #E4D5BE; --mw-suave: #948b7d; --mw-borde: #2a2724; --mw-tarjeta: #171614; --mw-acento: #E4D5BE; --mw-sobre-acento: #0F0F0F; --mw-libre-bg: #1d2620; --mw-libre-tx: #9dc4a6; --mw-ocup-bg: #2b1f1d; --mw-ocup-tx: #c98d80; } /* --- Costa · azul pizarra sobre gris azulado. Sin negro ni blanco. --- */ [data-plantilla="costa"] { --mw-display: var(--mw-sans); --mw-fondo: #EDF2F4; --mw-tinta: #1F3A47; --mw-suave: #63808d; --mw-borde: #cddadf; --mw-tarjeta: #ffffff; --mw-acento: #35748F; --mw-sobre-acento: #ffffff; --mw-libre-bg: #dfeee6; --mw-libre-tx: #2c5c46; --mw-ocup-bg: #e6dfe2; --mw-ocup-tx: #7a4f5c; } /* El anfitrión puede sobrescribir el acento con su color de marca. Se inyecta en línea desde _cabecera.php, así que gana a estas reglas por especificidad de atributo style. */ /* -------------------------------------------------------------------------- 3. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--mw-fondo); color: var(--mw-tinta); font-family: var(--mw-texto-ff); font-size: var(--mw-t-cuerpo); line-height: 1.6; /* Ligaduras y kerning: gratis y se nota en los titulares. */ font-kerning: normal; text-rendering: optimizeLegibility; } /* Grano. Un SVG en línea al 3,5%: rompe la planitud digital y pesa ~300 bytes. `pointer-events:none` para que no se coma ningún clic. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { text-decoration-color: var(--mw-acento); } :focus-visible { outline: 2px solid var(--mw-acento); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--mw-acento); color: var(--mw-sobre-acento); } .mw-contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--mw-margen); } .mw-principal { padding-block: var(--mw-aire) calc(var(--mw-aire) * .8); } /* Detrás de un hero no hace falta el aire entero: el hero ya termina en el título y el bloque de arriba respira solo. */ .mw-hero + .mw-principal, .mw-hero-solo-texto + .mw-principal { padding-top: clamp(1.75rem, 5vh, 3.5rem); } .mw-estrecho { max-width: 680px; } .mw-centrado { text-align: center; } /* -------------------------------------------------------------------------- 4. TIPOGRAFÍA -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--mw-display); font-weight: 600; margin: 0; /* Los números del oficio: interlineado por debajo de 1 y tracking negativo. Es lo que separa un titular diseñado de un

por defecto. */ line-height: .95; letter-spacing: -.025em; text-wrap: balance; } h1 { font-size: var(--mw-t-display); line-height: .92; letter-spacing: -.035em; } h2 { font-size: var(--mw-t-h2); } p { margin: 0 0 1em; max-width: 68ch; } /* Metadatos: mono, pequeño, muy espaciado, en mayúsculas. El detalle que hace que un bloque de datos parezca de una marca y no de un formulario. */ .mw-meta, .mw-etiqueta, .mw-dia-cab, .mw-leyenda, .mw-nota, .mw-migas { font-family: var(--mw-mono); font-size: var(--mw-t-meta); letter-spacing: .11em; text-transform: uppercase; color: var(--mw-suave); } .mw-nota { text-transform: none; letter-spacing: .02em; line-height: 1.5; } /* -------------------------------------------------------------------------- 5. HERO -------------------------------------------------------------------------- */ /* El título va SOBRE la foto, con degradado de contraste. Es la diferencia entre "una foto y debajo un h1" y una portada. */ .mw-hero { position: relative; background: var(--mw-tinta); } .mw-hero-img { width: 100%; /* 52vh y no 62: a 62 el hero se comía más de media pantalla en móvil y no se intuía que hubiera nada debajo. Ahora asoma el contenido y se entiende que hay que bajar. */ height: clamp(17rem, 52vh, 30rem); object-fit: cover; /* Un punto por debajo de la saturación real: la foto deja de competir con el texto y el conjunto se ve más caro. */ filter: saturate(.92); } .mw-hero-velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,0) 78%); } .mw-hero-txt { position: absolute; inset: auto 0 0 0; padding: var(--mw-margen); padding-bottom: clamp(1.5rem, 4vh, 3rem); color: #fff; } .mw-hero-txt .mw-contenedor { padding: 0; } .mw-hero-txt h1 { color: #fff; max-width: 18ch; } .mw-hero-txt .mw-meta { color: rgba(255,255,255,.78); margin-bottom: .6rem; } /* Sin fotos: portada tipográfica. Nunca un hueco vacío. */ .mw-hero-solo-texto { background: var(--mw-acento); color: var(--mw-sobre-acento); padding: calc(var(--mw-aire) * .9) 0; } .mw-hero-solo-texto h1 { color: var(--mw-sobre-acento); max-width: 16ch; } .mw-hero-solo-texto .mw-meta { color: var(--mw-sobre-acento); opacity: .75; } /* Cabecera sin hero (estado, legal, 404) */ .mw-cabecera { margin-bottom: calc(var(--mw-aire) * .45); } .mw-cabecera h1 { margin-bottom: .5rem; } .mw-migas { margin: 0 0 .8rem; } /* -------------------------------------------------------------------------- 6. GALERÍA -------------------------------------------------------------------------- */ .mw-galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-bottom: var(--mw-aire); } /* Nunca una foto huérfana en su fila: si son impares, la última va a lo ancho. Con `auto-fit` salían 3+1 y parecía un error de maquetación. */ .mw-galeria a:last-child:nth-child(odd) { grid-column: 1 / -1; } .mw-galeria a:last-child:nth-child(odd) img { aspect-ratio: 21 / 9; } .mw-galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--mw-lento) var(--mw-ease), filter var(--mw-lento) var(--mw-ease); } /* Hover de tarjeta: una de las siete piezas que se miran, y la que más se descuida. Un zoom lento y contenido, nada de saltos. */ .mw-galeria a { overflow: hidden; display: block; background: var(--mw-tinta); } .mw-galeria a:hover img { transform: scale(1.045); filter: saturate(1.05); } /* -------------------------------------------------------------------------- 7. SECCIONES -------------------------------------------------------------------------- */ .mw-columnas { display: block; } /* Sin esto, en rejilla un hijo ancho (una tabla, una imagen) empuja la columna más allá de su fracción y desborda la página en horizontal. El `min-width` por defecto de un item de grid es `auto`, no 0. */ .mw-col-info, .mw-col-form { min-width: 0; } .mw-bloque { margin-bottom: var(--mw-aire); } .mw-bloque > h2 { margin-bottom: 1.1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--mw-borde); } .mw-descripcion { font-size: 1.06em; line-height: 1.72; } /* Los bloques que sí son "tarjeta": formulario, pago, destacado */ .mw-tarjeta { background: var(--mw-tarjeta); border: 1px solid var(--mw-borde); border-radius: var(--mw-radio); padding: clamp(1.25rem, 3vw, 1.9rem); } .mw-destacado { border-color: var(--mw-acento); } .mw-pago { border-color: var(--mw-acento); border-style: dashed; } /* -------------------------------------------------------------------------- 8. SERVICIOS -------------------------------------------------------------------------- */ .mw-servicios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .55rem 1.25rem; } .mw-servicios li { padding: .45rem 0 .45rem 1.4rem; position: relative; border-bottom: 1px solid var(--mw-borde); font-size: .96em; } /* Regla fina en vez de bolita: más editorial, menos "lista de la compra". */ .mw-servicios li::before { content: ""; position: absolute; left: 0; top: 1.08em; width: .7rem; height: 1px; background: var(--mw-acento); } /* -------------------------------------------------------------------------- 9. CALENDARIO -------------------------------------------------------------------------- */ .mw-meses { display: grid; grid-template-columns: 1fr; gap: var(--mw-hueco); } .mw-mes-titulo { font-family: var(--mw-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .55rem; } .mw-mes-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .mw-dia-cab { text-align: center; padding: .3rem 0; font-size: .65rem; } .mw-dia { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-variant-numeric: tabular-nums; border-radius: var(--mw-radio-s); } .mw-dia-vacio { background: transparent; } .mw-dia-libre { background: var(--mw-libre-bg); color: var(--mw-libre-tx); } .mw-dia-ocupado { background: var(--mw-ocup-bg); color: var(--mw-ocup-tx); } .mw-dia-pasado { background: transparent; color: var(--mw-suave); opacity: .4; } /* El tachado del día ocupado se dibuja, no se hereda de text-decoration: así queda fino y a la medida del número. */ .mw-dia-ocupado { position: relative; } .mw-dia-ocupado::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 1px; background: currentColor; opacity: .55; } .mw-leyenda { margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; } .mw-leyenda span { display: inline-flex; align-items: center; gap: .4rem; } .mw-punto { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; } .mw-punto-libre { background: var(--mw-libre-bg); } .mw-punto-ocupado { background: var(--mw-ocup-bg); } /* -------------------------------------------------------------------------- 10. FORMULARIO -------------------------------------------------------------------------- */ .mw-tarjeta-form { border-top: 2px solid var(--mw-acento); } .mw-precio-caja { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--mw-borde); } .mw-precio-caja strong { font-family: var(--mw-display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; } .mw-campo { margin-bottom: .9rem; } .mw-campo label { display: block; margin-bottom: .3rem; } .mw-campo label, .mw-campo-check label { font-family: var(--mw-mono); font-size: var(--mw-t-meta); letter-spacing: .09em; text-transform: uppercase; color: var(--mw-suave); } .mw-campo-check label { text-transform: none; letter-spacing: .01em; font-family: var(--mw-texto-ff); font-size: .84rem; color: var(--mw-tinta); } .mw-campo input, .mw-campo textarea, .mw-campo select { width: 100%; padding: .72rem .85rem; background: var(--mw-fondo); border: 1px solid var(--mw-borde); border-radius: var(--mw-radio-s); color: var(--mw-tinta); font-family: inherit; /* 16px justos: por debajo, iOS hace zoom al enfocar el campo y descoloca toda la página. */ font-size: 16px; transition: border-color var(--mw-rapido) var(--mw-ease); } .mw-campo input:focus, .mw-campo textarea:focus { border-color: var(--mw-acento); outline: 1px solid var(--mw-acento); outline-offset: -2px; } .mw-campo textarea { resize: vertical; min-height: 5rem; line-height: 1.5; } .mw-campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .mw-campo-check { display: flex; gap: .6rem; align-items: flex-start; margin: 1.1rem 0; } .mw-campo-check input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--mw-acento); } /* Honeypot: fuera de pantalla, no `display:none`. Hay bots que detectan lo segundo y se saltan el campo, que es justo lo que no queremos. */ .mw-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------------------------- 11. BOTONES -------------------------------------------------------------------------- */ .mw-boton { display: inline-block; width: 100%; padding: .95rem 1.4rem; background: var(--mw-acento); color: var(--mw-sobre-acento); border: 1px solid var(--mw-acento); border-radius: var(--mw-radio-s); font-family: var(--mw-mono); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: transform var(--mw-rapido) var(--mw-ease), opacity var(--mw-rapido) var(--mw-ease); } .mw-boton:hover { opacity: .88; transform: translateY(-1px); } .mw-boton:active { transform: translateY(0); } .mw-boton-linea { background: transparent; color: var(--mw-acento); } /* -------------------------------------------------------------------------- 12. AVISOS Y ESTADOS -------------------------------------------------------------------------- */ .mw-aviso { border-radius: var(--mw-radio-s); padding: .85rem 1.1rem; margin-bottom: 1.1rem; font-size: .92rem; border: 1px solid var(--mw-borde); background: var(--mw-tarjeta); } .mw-aviso ul { margin: 0; padding-left: 1.1rem; } .mw-aviso-ok { border-left: 3px solid var(--mw-libre-tx); } .mw-aviso-error { border-left: 3px solid var(--mw-ocup-tx); } .mw-estado { display: inline-block; padding: .35rem 1rem; border-radius: 999px; border: 1px solid currentColor; font-family: var(--mw-mono); font-size: var(--mw-t-meta); letter-spacing: .1em; text-transform: uppercase; } .mw-estado-pendiente { color: var(--mw-suave); } .mw-estado-ok { color: var(--mw-libre-tx); } .mw-estado-no { color: var(--mw-ocup-tx); } .mw-datos { width: 100%; border-collapse: collapse; } .mw-datos th { text-align: left; padding: .65rem 0; width: 9rem; font-weight: 400; font-family: var(--mw-mono); font-size: var(--mw-t-meta); letter-spacing: .09em; text-transform: uppercase; color: var(--mw-suave); border-bottom: 1px solid var(--mw-borde); vertical-align: top; } .mw-datos td { padding: .65rem 0; font-weight: 500; border-bottom: 1px solid var(--mw-borde); } .mw-contacto p { margin: .25rem 0; } /* -------------------------------------------------------------------------- 13. TEXTO LEGAL -------------------------------------------------------------------------- */ .mw-texto-legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1.5rem; } .mw-texto-legal h2 { font-size: 1.1rem; margin-top: 2.4rem; margin-bottom: .5rem; } .mw-texto-legal ul { padding-left: 1.1rem; } .mw-texto-legal li { margin-bottom: .3rem; } /* -------------------------------------------------------------------------- 14. PIE -------------------------------------------------------------------------- */ /* El pie y el 404 son las dos piezas que más se descuidan y las que más delatan. Este lleva peso: el nombre grande y el enlace tratado como tal. */ .mw-pie { border-top: 1px solid var(--mw-borde); padding-block: var(--mw-aire) calc(var(--mw-aire) * .5); /* Sin margin-top: .mw-principal ya trae padding-bottom y los dos juntos dejaban 200 px de nada entre el último bloque y el pie. */ } .mw-pie-marca { font-family: var(--mw-display); font-size: clamp(1.4rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 .3rem; } .mw-pie-marca a { text-decoration: none; } .mw-pie-marca a:hover { text-decoration: underline; text-decoration-thickness: 2px; } .mw-pie-cta { margin: 0 0 1.6rem; max-width: 40ch; } .mw-pie-linea { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: baseline; padding-top: 1.1rem; border-top: 1px solid var(--mw-borde); } .mw-pie-linea, .mw-pie-linea a { font-family: var(--mw-mono); font-size: var(--mw-t-meta); letter-spacing: .09em; text-transform: uppercase; color: var(--mw-suave); } /* -------------------------------------------------------------------------- 15. MOVIMIENTO — CSS nativo, cero JS -------------------------------------------------------------------------- */ /* `animation-timeline: view()` liga la animación al scroll sin una línea de JavaScript. Donde no está soportado (Safari a día de hoy) la regla se ignora entera y el contenido se ve tal cual, sin quedarse invisible: por eso el estado inicial va DENTRO de @supports. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .mw-bloque, .mw-galeria { animation: mw-entrar linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; } } } @keyframes mw-entrar { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* -------------------------------------------------------------------------- 16. ESCRITORIO -------------------------------------------------------------------------- */ @media (min-width: 900px) { .mw-columnas { display: grid; grid-template-columns: 1fr 22rem; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } /* El formulario acompaña al scroll: la ficha es larga y sin esto hay que volver arriba para reservar. */ .mw-col-form { position: sticky; top: 1.5rem; } .mw-meses { grid-template-columns: 1fr 1fr; gap: 2rem; } } /* Punto intermedio: entre 700 y 900 la ficha se queda en una columna pero el calendario ya cabe en dos meses. Es la franja donde más layouts se rompen porque solo se prueba en móvil y en 1440. */ @media (min-width: 700px) and (max-width: 899px) { .mw-meses { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } /* -------------------------------------------------------------------------- 17. IMPRESIÓN -------------------------------------------------------------------------- */ /* Un huésped imprime o guarda en PDF la página de estado de su reserva. */ @media print { body::after, .mw-col-form, .mw-pie-cta, .mw-galeria, .mw-hero-velo { display: none; } body { background: #fff; color: #000; } .mw-tarjeta { border: 1px solid #999; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; } } /* -------------------------------------------------------------------------- 18. WIDGET EMBEBIBLE (fase 2) -------------------------------------------------------------------------- /widget/{token} dentro de un