) */ .lista-datos--filas { gap: 0; } .lista-datos--filas > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 0.85rem; border-bottom: 1px solid var(--color-linea); } .lista-datos--filas > div:last-child { border-bottom: 0; } .lista-datos--filas dt { margin: 0; font-weight: 500; color: var(--color-gris); } .lista-datos--filas dd { font-weight: 600; text-align: right; } /* ---------- Lista con check ---------- */ .lista-check { display: grid; gap: 0.75rem; } .lista-check li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem; align-items: start; } .lista-check li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; border-radius: 50%; background: var(--color-acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1a1f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 0.8rem no-repeat; } /* ---------- Tabla comparativa ---------- */ .tabla-scroll { overflow-x: auto; border-radius: var(--radio-md); } .tabla { width: 100%; min-width: 34rem; border-collapse: collapse; background: var(--color-superficie); font-size: var(--texto-sm); } .tabla th, .tabla td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--color-linea); } .tabla thead th { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gris); font-weight: 600; } .tabla tbody tr:last-child td, .tabla tbody tr:last-child th { border-bottom: 0; } .tabla__precio { font-size: var(--texto-lg); font-weight: 600; white-space: nowrap; } /* Apilada: en móvil cada fila es una tarjeta y cada celda muestra su etiqueta (data-label). */ @media (max-width: 40rem) { .tabla--apilada { min-width: 0; } .tabla--apilada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .tabla--apilada tr { display: grid; gap: 0.5rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--color-linea); } .tabla--apilada tbody tr:last-child { border-bottom: 0; } .tabla--apilada th, .tabla--apilada td { display: flex; justify-content: space-between; gap: 1rem; padding: 0; border: 0; text-align: right; } .tabla--apilada th[scope="row"] { font-size: var(--texto-lg); text-align: left; } .tabla--apilada td::before { content: attr(data-label); color: var(--color-gris); text-align: left; font-weight: 400; } } /* Chips sobre fondo claro (la forma base vive en el CSS crítico, pensada para el hero oscuro) */ .chips--claros .chip { background: var(--color-fondo); border-color: var(--color-linea); color: var(--color-texto); font-size: var(--texto-base); padding: 0.7em 1.2em; } .chips--centro { justify-content: center; } /* ---------- Media (imagen o video) redondeada ---------- */ .media { border-radius: var(--radio-lg); overflow: hidden; background: var(--color-tinta); } .media img, .media video { width: 100%; height: 100%; object-fit: cover; } .media--video { aspect-ratio: 16 / 9; } .media--video video { object-fit: contain; } .media--4x3 { aspect-ratio: 4 / 3; } /* ---------- Figura con pie de foto ---------- */ .figura { display: grid; gap: 0.6rem; } .figura figcaption { font-size: var(--texto-sm); color: var(--color-gris); } /* ---------- Texto largo ---------- */ .prosa { max-width: 44rem; } .prosa > * + * { margin-block-start: 1rem; } .prosa h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); margin-block-start: 2.5rem; } .prosa h3 { margin-block-start: 2rem; } .prosa ul { list-style: disc; padding-inline-start: 1.25rem; } .prosa a { color: var(--color-acento-texto); } .nota { margin-block-start: 2rem; text-align: center; font-size: var(--texto-sm); color: var(--color-gris); } .nota a { color: var(--color-acento-texto); } .texto-gris { color: var(--color-gris); } .texto-icono { display: flex; align-items: center; gap: 0.4rem; } .texto-icono svg { width: 1em; height: 1em; flex: none; color: var(--color-acento-texto); } .texto-pequeno { font-size: var(--texto-sm); } } /* MAPA DE LOTES — componente irreducible (anotado en _plans/primitivas.md). Sin JS: filtros con :has(), ficha de cada lote con popover nativo. */ @layer componentes { .mapa-lotes { display: grid; gap: 1.25rem; padding: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); border-radius: var(--radio-lg); background: var(--color-superficie); } /* ---------- Controles: filtro + leyenda ---------- */ .mapa-lotes__controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .filtro { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; } .filtro legend { width: 100%; margin-block-end: 0.5rem; font-size: var(--texto-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gris); } .filtro label { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.45rem 0.95rem; border-radius: var(--radio-pill); background: var(--color-fondo); font-size: var(--texto-sm); font-weight: 500; cursor: pointer; user-select: none; } .filtro input { accent-color: var(--color-acento-texto); } .filtro label:has(input:checked) { background: var(--color-tinta); color: #fff; } .filtro label:has(input:focus-visible) { outline: 2px solid var(--color-acento-texto); outline-offset: 2px; } .leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--texto-sm); color: var(--color-gris); } .leyenda li { display: inline-flex; align-items: center; gap: 0.5rem; } .leyenda li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--muestra); } .leyenda [data-estado="disponible"] { --muestra: var(--color-disponible); } .leyenda [data-estado="reservado"] { --muestra: var(--color-reservado); } .leyenda [data-estado="vendido"] { --muestra: repeating-linear-gradient(135deg, var(--color-vendido) 0 3px, #dfe4e6 3px 6px); } /* ---------- Lienzo ---------- */ .mapa-lotes__scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radio-md); } /* Sin JS: con rtl el scroll horizontal arranca por la derecha (donde se concentran los lotes). */ .mapa-lotes__scroll--derecha { direction: rtl; } .mapa-lotes__scroll--derecha > * { direction: ltr; } .mapa-lotes__lienzo { position: relative; min-inline-size: 46rem; } .mapa-lotes__ayuda { display: none; font-size: var(--texto-sm); color: var(--color-gris); } @media (max-width: 48rem) { .mapa-lotes__ayuda { display: block; } } /* Variante rejilla (plano ortogonal, en metros): Altos de Madelena */ /* Columnas: manzanas (1) · calle lateral (2), como en el PDF: el lote 1 junto a la Calle 25 Sur. */ .mapa-lotes__lienzo--rejilla { display: grid; grid-template-columns: 97fr 5fr; grid-template-rows: 15fr 12fr 16fr 16fr 7fr; aspect-ratio: 102 / 66; column-gap: 0.5rem; background: var(--color-fondo); padding: 0.75rem; border-radius: var(--radio-md); } .plano-bloque { display: grid; grid-column: 1; justify-self: end; inline-size: calc(var(--largo) / var(--largo-max) * 100%); border: 2px solid var(--color-tinta); border-radius: 6px; overflow: hidden; background: var(--color-tinta); gap: 2px; } .plano-via, .plano-calle { display: grid; place-items: center; font-size: var(--texto-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gris); background: repeating-linear-gradient(90deg, transparent 0 18px, rgb(15 26 31 / 0.12) 18px 30px) center / 100% 2px no-repeat; } .plano-via { grid-column: 1; } .plano-calle--vertical { grid-column: 2; grid-row: 1 / 5; writing-mode: vertical-rl; background: repeating-linear-gradient(0deg, transparent 0 18px, rgb(15 26 31 / 0.12) 18px 30px) center / 2px 100% no-repeat; } .plano-via span, .plano-calle span { background: var(--color-fondo); padding: 0.2em 0.8em; } /* Variante plano (imagen del loteo de fondo + bloques encima, en %): Villa Fontana */ .mapa-lotes__lienzo--plano { aspect-ratio: 1280 / 864; min-inline-size: 56rem; background: #fff; } .mapa-lotes__lienzo--plano > img { position: absolute; inset: 0; width: 100%; height: 100%; } .plano-bloque--libre { position: absolute; border-width: 1px; border-radius: 2px; gap: 1px; background: rgb(15 26 31 / 0.55); } /* ---------- Lote ---------- */ .lote { display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; border: 0; background: var(--color-disponible); color: #fff; font-size: clamp(0.625rem, 0.5rem + 0.3vw, 0.8125rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; transition: filter 0.15s ease, opacity 0.2s ease, box-shadow 0.15s ease; } .lote[data-estado="reservado"] { background: var(--color-reservado); color: var(--color-tinta); } /* Inventario sin confirmar: sin estado publicado, solo "consultar" */ .lote[data-estado="consultar"] { background: var(--color-acento-texto); } .plano-bloque--libre .lote[data-estado="consultar"] { background: rgb(6 112 138 / 0.8); } .leyenda [data-estado="consultar"] { --muestra: var(--color-acento-texto); } .lote-ficha__estado[data-estado="consultar"] { color: var(--color-acento-texto); } .lote[data-estado="vendido"] { background: repeating-linear-gradient(135deg, var(--color-vendido) 0 4px, #dfe4e6 4px 8px); color: #7b868b; cursor: not-allowed; } button.lote:hover { filter: brightness(1.12); box-shadow: inset 0 0 0 2px #fff; } button.lote:focus-visible { outline: 3px solid var(--color-tinta); outline-offset: -3px; } .plano-bloque--libre .lote { font-size: clamp(0.5rem, 0.35rem + 0.35vw, 0.6875rem); text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); } .plano-bloque--libre .lote[data-estado="disponible"] { background: rgb(31 157 85 / 0.82); } .plano-bloque--libre .lote[data-estado="reservado"] { background: rgb(227 160 8 / 0.9); text-shadow: none; } .plano-bloque--libre .lote[data-estado="vendido"] { text-shadow: none; } /* Filtros sin JS */ .mapa-lotes:has(input[value="6x15"]:checked) .lote:not([data-tipo="6x15"]), .mapa-lotes:has(input[value="7x16"]:checked) .lote:not([data-tipo="7x16"]), .mapa-lotes:has(input[value="esquinero"]:checked) .lote:not([data-tipo="esquinero"]), .mapa-lotes:has(input[value="8x16"]:checked) .lote:not([data-tipo="8x16"]), .mapa-lotes:has(input[value="7x20"]:checked) .lote:not([data-tipo="7x20"]), .mapa-lotes:has(input[data-filtro="solo-disponibles"]:checked) .lote:not([data-estado="disponible"]) { background: #e4e9ea; color: #aab4b8; text-shadow: none; box-shadow: none; } .mapa-lotes:has(input[data-filtro="solo-disponibles"]:checked) .plano-bloque--libre .lote:not([data-estado="disponible"]) { background: rgb(255 255 255 / 0.6); } /* ---------- Lista por manzana (interacción principal en móvil) ---------- */ .lista-lotes { display: grid; gap: 0.5rem; } .lista-lotes details { border-radius: var(--radio-sm); background: var(--color-fondo); } .lista-lotes summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: 0.75rem 1rem; font-weight: 600; cursor: pointer; list-style: none; } .lista-lotes summary::-webkit-details-marker { display: none; } .lista-lotes summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; } .lista-lotes details[open] summary::after { content: "−"; } .lista-lotes summary small { margin-inline-start: auto; font-weight: 500; color: var(--color-gris); } .lista-lotes__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: 0.4rem; padding: 0 1rem 1rem; } .lista-lotes__rejilla .lote { min-height: 44px; border-radius: 8px; font-size: var(--texto-sm); } /* ---------- Ficha del lote (popover nativo) ---------- */ .lote-ficha { inset: 0; margin: auto; width: min(24rem, 100vw - 2rem); height: fit-content; padding: 1.5rem; border: 0; border-radius: var(--radio-md); background: var(--color-superficie); color: var(--color-texto); box-shadow: 0 30px 80px rgb(15 26 31 / 0.3); } .lote-ficha::backdrop { background: rgb(15 26 31 / 0.5); backdrop-filter: blur(2px); } .lote-ficha__cabeza { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; } .lote-ficha__titulo { font-size: 1.5rem; } .lote-ficha__cerrar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--color-fondo); font-size: 1.25rem; line-height: 1; } .lote-ficha__estado { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: 0.35rem; font-size: var(--texto-sm); font-weight: 600; color: var(--color-disponible); } .lote-ficha__estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .lote-ficha__estado[data-estado="reservado"] { color: #9a6c00; } .lote-ficha__datos { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin-block: 1rem 1.25rem; font-size: var(--texto-sm); } .lote-ficha__datos dt { color: var(--color-gris); } .lote-ficha__datos dd { font-weight: 600; text-align: right; } .lote-ficha__precio { font-size: var(--texto-lg); } .lote-ficha__precio small { font-size: var(--texto-xs); font-weight: 500; color: var(--color-gris); } .lote-ficha .boton { width: 100%; justify-content: center; } .lote-ficha__nota { margin-block-start: 0.75rem; font-size: var(--texto-xs); color: var(--color-gris); text-align: center; } .mapa-lotes__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; font-size: var(--texto-sm); color: var(--color-gris); } } /* CONTADOR / URGENCIA — componente irreducible. Solo muestra datos reales del inventario. */ @layer componentes { /* Barra de % vendido dentro de una .cifra */ .barra { height: 8px; border-radius: var(--radio-pill); background: var(--color-fondo); overflow: hidden; } .barra > span { display: block; height: 100%; border-radius: inherit; background: var(--color-tinta); } .cifra--acento .barra { background: rgb(15 26 31 / 0.15); } .cifra__detalle { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--texto-sm); color: var(--color-gris); } /* Desglose por tamaño dentro de una .cifra */ .lista-cifras { display: grid; gap: 0.6rem; margin-block-start: 0.25rem; font-size: var(--texto-sm); } .lista-cifras li { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: 0.6rem; border-bottom: 1px solid var(--color-linea); } .lista-cifras li:last-child { padding-block-end: 0; border-bottom: 0; } .lista-cifras li > span:last-child { font-weight: 600; white-space: nowrap; } a.cifra { text-decoration: none; transition: transform 0.25s ease; } a.cifra:hover { transform: translateY(-4px); } .cifra--acento .boton-redondo { position: relative; z-index: 1; background: var(--color-tinta); color: #fff; } a.cifra--acento:hover .boton-redondo { transform: rotate(45deg); } /* Sello "Últimos lotes" */ .sello { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35em 0.8em; border-radius: var(--radio-pill); background: var(--color-tinta); color: #fff; font-size: var(--texto-xs); font-weight: 600; letter-spacing: 0.04em; } .sello::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-acento); } /* Barra fija inferior en móvil: contador + WhatsApp */ .barra-fija { position: fixed; inset: auto 0.75rem 0.75rem; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.5rem 0.5rem 1.1rem; border-radius: var(--radio-pill); background: var(--color-tinta); color: #fff; box-shadow: 0 12px 30px rgb(15 26 31 / 0.3); font-size: var(--texto-sm); line-height: 1.25; } .barra-fija strong { color: var(--color-acento); } @media (max-width: 48rem) { .barra-fija { display: flex; } body:has(.barra-fija) .pie { padding-block-end: 5.5rem; } } /* Aviso de inventario de ejemplo (solo desarrollo): baja la cabecera flotante para no taparla */ body:has(.aviso-dev) .cabecera { top: 3.75rem; } .aviso-dev { position: relative; z-index: 60; height: 3rem; padding: 0.9rem var(--gutter) 0; overflow: hidden; background: #fff3cd; color: #664d03; font-size: var(--texto-xs); text-align: center; white-space: nowrap; text-overflow: ellipsis; } } /* FAQ — acordeón nativo con

. */ @layer componentes { .faq { display: grid; gap: 0.6rem; } .faq details { border-radius: var(--radio-md); background: var(--color-superficie); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; font-size: var(--texto-lg); font-weight: 500; letter-spacing: -0.01em; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 300; line-height: 1; } .faq details[open] summary::after { content: "−"; } .faq__respuesta { padding: 0 1.35rem 1.35rem; color: var(--color-gris); font-size: var(--texto-sm); max-width: 60ch; } .faq__respuesta > * + * { margin-block-start: 0.75rem; } } /* CONTACTO POR WHATSAPP — lista de botones por ciudad (sin formularios: decisión del cliente). */ @layer componentes { .lista-whatsapp { display: grid; gap: 1rem; } .lista-whatsapp li { display: grid; gap: 0.35rem; } .lista-whatsapp .boton { justify-content: center; } } /* GUÍA (blog) — componente irreducible: cuerpo de lectura con índice lateral fijo. */ @layer componentes { .guia__meta { font-size: var(--texto-sm); color: rgb(255 255 255 / 0.8); } .guia__cuerpo { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); grid-template-columns: minmax(0, 1fr); } @media (min-width: 64rem) { .guia__cuerpo { grid-template-columns: 18rem minmax(0, 44rem); justify-content: center; } .guia__lateral { order: 0; } } .guia__lateral { display: grid; gap: 1rem; align-content: start; } @media (min-width: 64rem) { .guia__lateral { position: sticky; top: 6.5rem; align-self: start; } } .guia__indice-titulo, .guia__cta-titulo { font-weight: 600; font-size: var(--texto-lg); line-height: 1.25; } .guia__indice ol { display: grid; gap: 0.5rem; list-style: decimal; padding-inline-start: 1.2rem; font-size: var(--texto-sm); } .guia__indice a { color: var(--color-texto); text-decoration: none; } .guia__indice a:hover { color: var(--color-acento-texto); text-decoration: underline; } .guia__cta .boton { justify-content: center; } .guia__fuentes { margin-block-start: 3rem; padding-block-start: 2rem; border-top: 1px solid var(--color-linea); } .guia__fuentes ol { list-style: decimal; padding-inline-start: 1.25rem; font-size: var(--texto-sm); } /* Texto largo dentro de la guía */ .prosa h2 { scroll-margin-top: 6.5rem; } .prosa h3 { font-size: var(--texto-h3); } .prosa ol { list-style: decimal; padding-inline-start: 1.25rem; } .prosa li + li { margin-block-start: 0.4rem; } .prosa .tabla-scroll { margin-block: 1.5rem; } .prosa blockquote { padding: 1.25rem 1.5rem; border-radius: var(--radio-md); background: var(--color-superficie); border-inline-start: 4px solid var(--color-acento); } .prosa blockquote p { margin: 0; } } /* BANDA DE VIDEO — póster a pantalla completa con botón de reproducir (plantilla). */ @layer componentes { .banda-video { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(26rem, 20rem + 20vw, 36rem); padding-block: clamp(3rem, 2rem + 4vw, 5rem); color: #fff; background: var(--color-tinta); text-decoration: none; } .banda-video > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .banda-video::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(10 18 22 / 0.7), rgb(10 18 22 / 0.1) 70%); } .banda-video__play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: clamp(4.5rem, 3.5rem + 3vw, 6rem); aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.25s ease, background-color 0.25s ease; } .banda-video__play svg { width: 30%; height: 30%; margin-inline-start: 6%; } .banda-video:hover .banda-video__play { transform: scale(1.06); background: rgb(255 255 255 / 0.35); } .banda-video__contenido { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; } .banda-video__contenido h2 { max-width: 16ch; } /* Tarjeta de vidrio (esquina de la banda) */ .vidrio { display: grid; gap: 0.75rem; width: min(100%, 14rem); padding: 0.75rem; border-radius: var(--radio-md); background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-weight: 500; line-height: 1.25; } .vidrio img { border-radius: var(--radio-sm); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; } } /* PIE — "Hablemos · Contáctanos" gigante sobre foto oscura + columnas (plantilla). */ @layer componentes { .pie { position: relative; isolation: isolate; color: #fff; background: var(--color-tinta); overflow: hidden; } .pie > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: blur(6px); scale: 1.05; } .pie::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(10 18 22 / 0.86); } .pie__llamado { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 0.5rem + 2vw, 2.5rem); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); border-bottom: 1px solid rgb(255 255 255 / 0.12); text-decoration: none; font-size: clamp(2.75rem, 1rem + 7.5vw, 7.5rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; text-align: center; } .pie__circulo { display: grid; place-items: center; width: clamp(4.5rem, 3rem + 5vw, 7.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--color-acento); color: var(--color-tinta); font-size: var(--texto-sm); letter-spacing: 0; line-height: 1.2; font-weight: 600; transition: transform 0.3s ease; } .pie__circulo svg { width: 42%; height: 42%; } .pie__llamado:hover .pie__circulo { transform: rotate(-12deg) scale(1.05); } .pie__columnas { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); } .pie__marca img { width: 170px; height: auto; margin-block-end: 1rem; } .pie p, .pie li { font-size: var(--texto-sm); color: rgb(255 255 255 / 0.72); } .pie .pie__titulo { font-size: var(--texto-base); font-weight: 600; margin-block-end: 1rem; color: #fff; } .pie ul { display: grid; gap: 0.6rem; } .pie a { text-decoration: none; } .pie a:hover { color: var(--color-acento); } .pie .pie__destacado { color: var(--color-acento); font-size: var(--texto-lg); font-weight: 500; } .pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: var(--texto-xs); color: rgb(255 255 255 / 0.55); } }