/* ═══════════════════════════════════════════════════════════════════
Cabañas Los Reales de los Siete Lagos · Licán Ray
Demo de presentación — tanda T1 (alojamiento)
IDENTIDAD — de dónde sale y de qué se aparta
──────────────────────────────────────────────────────────────────
Papel, no pantalla. Blanco cálido y crema con la tinta casi negra,
y el negro pleno guardado para dos sitios: la barra de arriba y el
cierre de la propuesta. Ese salto —papel en casi todo, negro en los
extremos— es lo que le da el aire de impreso, y es también lo que
deja que el color lo pongan las fotos y no la interfaz.
La versión anterior era al revés: azules profundos de lago con
dorado, fondo oscuro. Se veía bien en escritorio y pesada en el
teléfono, que es donde se va a abrir este enlace.
· El acento sobre papel es un BRONCE oscuro, no un dorado claro: a
4,5:1 sobre crema, un dorado claro no llega ni de cerca. El dorado
claro existe igual, pero sólo vive sobre la barra negra.
· Los siete lagos siguen siendo siete azules, y sobre papel funcionan
mejor que antes: son bandas de color contra el crema, no tonos
apenas distinguibles entre sí sobre un fondo oscuro. Vuelven en el
horizonte de la portada y en el friso del entorno.
· El morado del logo del negocio entra como color de marca en el
pavo real y en el logo del pie. No es de la paleta: es suyo.
El verde de la página NO es un color declarado: es el del bosque de
sus propias fotos, que asoma porque el velo del fondo está abierto.
La diferencia importa para no pisarse con Prado Verde.
Se aparta a propósito de sus demos hermanas:
Prado Verde es verde-hueso de prado con acento naranjo brasa, y su
pieza central es el plano del terreno. Las dos son claras ahora, pero
ninguna comparte color: acá el papel es neutro cálido, el acento es
bronce y el peso lo lleva el negro. Los Copihues llevará rojo copihue
sobre bosque húmedo: tampoco hay rojo acá.
TIPOGRAFÍA — por qué este par
──────────────────────────────────────────────────────────────────
· Newsreader (display) es una serif editorial de tamaño óptico
variable, hecha para leerse en pantalla. Le da al sitio aire de
documento impreso —que es justo lo que pide una pieza que se
llama "La cuenta clara"— sin caer en la serif de hotel de lujo.
· Public Sans (texto) es una grotesca neutra de aperturas abiertas,
diseñada para formularios y datos. No compite con la serif: la
deja hablar y aguanta párrafos largos en gris claro.
· DM Mono (dato) para cifras, kilómetros y las boletas. Monoespaciada
de trazo fino: alinea columnas de pesos sin verse de terminal.
Ninguna de las tres se repite en los proyectos anteriores de Yordy
ni en las otras demos.
═══════════════════════════════════════════════════════════════════ */
:root{
/* superficie — papel, no pantalla
La página es clara: blanco cálido y crema, con la tinta casi negra.
El negro se guarda para dos sitios donde manda de verdad: la barra
de arriba y el cierre de la propuesta. Ese salto —papel casi todo,
negro en los extremos— es lo que le da el aire de impreso. */
--papel: #FCFAF6; /* el fondo del sitio */
--crema: #F4EFE6; /* secciones alternas */
--nata: #FFFFFF; /* tarjetas */
--nata-2: #FAF4E8; /* tarjeta destacada y realce al pasar el cursor */
--linea: #E4DCCC;
--noche: #16150F; /* la barra de arriba y el cierre */
/* tinta */
--tinta: #23211C; /* texto */
--humo: #5C574D; /* texto secundario */
/* acentos
Dos dorados y no uno: sobre papel, un dorado claro no llega a 4,5:1
ni de cerca —lo dice el propio encargo—, así que el que va sobre
claro es un bronce oscuro. El claro se guarda para la barra negra,
donde sí funciona. Medidos los dos. */
--bronce: #7A5C1C; /* acento sobre papel: 5,9:1 */
--dorado-claro: #D8B463; /* acento sobre la barra negra: 9,3:1 */
--marca: #4E4B67; /* el morado del logo del negocio */
--merma: #A63D22; /* ladrillo: sólo donde hay una pérdida */
/* los siete lagos, del más cercano al más lejano */
--lago-1: #2E6E86; /* Calafquén */
--lago-2: #2A6178; /* Pullinque */
--lago-3: #26556A; /* Pellaifa */
--lago-4: #22495C; /* Panguipulli */
--lago-5: #1E3D4E; /* Neltume */
--lago-6: #1A3140; /* Riñihue */
--lago-7: #162632; /* Pirihueico */
/* tipografía */
--display: "Newsreader", Georgia, "Times New Roman", serif;
--cuerpo: "Public Sans", "Segoe UI", system-ui, sans-serif;
--dato: "DM Mono", ui-monospace, "Consolas", monospace;
/* medidas */
--ancho: 1120px;
--radio: 10px;
--borde: 1px solid var(--linea);
/* fondo de la sección actual: lo usa la etiqueta "ejemplo" para
recortar el borde punteado sin que se le note el parche */
--fondo-local: var(--papel);
}
/* ── base ────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{
/* Sin esta línea el navegador dibuja los controles nativos en claro:
la barra de scroll sale blanca y el selector de fecha del
formulario queda con fondo blanco y letra clara, ilegible. */
color-scheme:light;
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}
body{
margin:0;
background:var(--papel);
color:var(--tinta);
font-family:var(--cuerpo);
font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
line-height:1.62;
-webkit-font-smoothing:antialiased;
/* el lleva viewport-fit=cover: sin esto el contenido
se mete bajo la muesca y bajo la barra de gestos del iPhone */
padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
padding-bottom:env(safe-area-inset-bottom);
overflow-x:hidden;
}
h1,h2,h3{
font-family:var(--display);
font-weight:500;
line-height:1.1;
letter-spacing:-.012em;
margin:0;
text-wrap:balance;
}
p{ margin:0 0 1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
a,button,input,select,textarea,label,summary{ touch-action:manipulation; }
img,svg{ max-width:100%; }
:focus-visible{
outline:3px solid var(--bronce);
outline-offset:3px;
border-radius:4px;
}
.saltar{
position:absolute; left:-9999px; top:0; z-index:200;
background:var(--noche); color:var(--papel);
padding:.8rem 1.2rem; font-weight:700; text-decoration:none;
border-radius:6px;
}
.saltar:focus{ left:1rem; top:1rem; }
.caja{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
.ojo{
font-family:var(--dato);
font-size:.72rem;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--humo);
margin:0 0 1rem;
}
.ojo--dorado{ color:var(--bronce); }
/* ── marcador de dato de ejemplo ─────────────────────────────────
Todo lo que lleva .ej es relleno. Se ve a simple vista para poder
decir en la reunión "esto se completa con sus datos reales", y se
borra junto con la clase cuando el dato llega. */
.ej{
position:relative;
outline:1px dashed color-mix(in srgb, var(--merma) 55%, transparent);
outline-offset:10px;
border-radius:2px;
}
.ej::after{
content:"ejemplo";
position:absolute; top:-10px; right:-10px;
transform:translateY(-100%);
font-family:var(--dato); font-size:.62rem; letter-spacing:.12em;
text-transform:uppercase;
color:var(--merma);
background:var(--fondo-local);
padding:0 .4rem;
pointer-events:none;
}
.ej--inline{
display:inline; outline-offset:3px; color:var(--merma);
font-weight:600;
}
.ej--inline::after{ content:none; }
/* ── banda de propuesta ──────────────────────────────────────────── */
.propuesta{ background:#0C0C08; color:var(--papel); }
.propuesta__cinta{
width:min(100% - 2.5rem, var(--ancho));
margin-inline:auto;
display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.1rem;
padding:.7rem 0;
font-size:.86rem;
}
.propuesta__marca{
font-family:var(--dato); font-size:.68rem;
letter-spacing:.14em; text-transform:uppercase;
color:var(--noche); background:var(--dorado-claro);
padding:.28rem .6rem; border-radius:3px;
white-space:nowrap;
}
.propuesta__txt{ margin:0; flex:1 1 22rem; color:color-mix(in srgb,var(--papel) 82%, transparent); }
.propuesta__txt strong{ color:var(--papel); }
.propuesta__txt code{ font-family:var(--dato); font-size:.9em; color:var(--dorado-claro); }
.propuesta__link{
font-weight:600; color:var(--dorado-claro);
text-underline-offset:4px; white-space:nowrap;
/* medido: sin esto quedaba en 22 px de alto y es lo primero que se
toca en el teléfono */
display:inline-flex; align-items:center; min-height:44px;
}
/* ── barra de arriba ─────────────────────────────────────────────
Negra y de borde a borde. La versión anterior era una isla flotante
con esquinas redondeadas y sombra; en el teléfono se partía en dos
filas, ocupaba 116 px y se veía como un cajón puesto encima de la
página. Ahora es una franja sólida, sin bordes ni sombra, que corta
el papel de un lado a otro: sobre una paleta clara ese contraste es
todo el efecto que hace falta.
Sigue en position:sticky y no fixed: sticky conserva su hueco en el
flujo, así la banda de propuesta no le queda debajo ni hay que
compensar con padding en el body. */
.cabecera{
position:sticky; top:0; z-index:100;
background:var(--noche);
color:var(--papel);
transition:box-shadow .35s ease;
}
/* al despegar del tope se le nota el peso, nada más */
.cabecera--pegada{ box-shadow:0 10px 30px -18px rgba(0,0,0,.55); }
.cabecera__caja{
position:relative;
width:min(100% - 2.5rem, var(--ancho));
margin-inline:auto;
display:flex; align-items:center; justify-content:space-between;
gap:1rem; padding:.7rem 0;
transition:padding .3s ease;
}
.cabecera--pegada .cabecera__caja{ padding-block:.5rem; }
/* avance de lectura: cero JavaScript, se engancha al scroll de la raíz */
.cabecera__avance{
position:absolute; left:0; right:0; bottom:-1px; height:2px;
transform-origin:0 50%; transform:scaleX(0);
background:var(--dorado-claro);
opacity:0; transition:opacity .3s ease;
}
.cabecera--pegada .cabecera__avance{ opacity:1; }
@supports (animation-timeline:scroll()){
.cabecera__avance{
animation:avanzar linear both;
animation-timeline:scroll(root block);
}
}
@keyframes avanzar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.marca{
display:flex; align-items:center; gap:.65rem; text-decoration:none;
color:var(--papel); min-height:44px;
}
/* El pavo real es la marca de verdad del negocio: sale de su logo, con el
fondo morado quitado y recortado al contenido. Va la versión clara,
porque la barra es negra; en el pie va la oscura sobre papel. Su rosa
original no se usa en ninguna de las dos: no se lee sobre ninguno de
los dos fondos. */
.marca__pavo{
width:auto; height:32px; flex:none;
transition:transform .45s cubic-bezier(.22,.8,.3,1);
}
.marca:hover .marca__pavo{ transform:scale(1.09) rotate(-3deg); }
.marca__txt{
font-family:var(--display); font-weight:600; font-size:1.12rem;
line-height:1.05; color:var(--papel);
display:flex; flex-direction:column;
}
.marca__txt small{
font-family:var(--dato); font-weight:400; font-size:.6rem;
letter-spacing:.13em; text-transform:uppercase;
color:color-mix(in srgb, var(--papel) 62%, transparent);
margin-top:.22rem;
}
.nav{ position:relative; display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; }
.nav a{
position:relative; z-index:1;
text-decoration:none; font-size:.88rem; font-weight:500;
padding:.5rem .7rem; border-radius:999px;
color:color-mix(in srgb, var(--papel) 72%, transparent);
transition:color .25s ease;
}
.nav a:hover{ color:var(--papel); }
.nav a[aria-current="true"]{ color:var(--dorado-claro); }
/* La pastilla se desliza de un enlace a otro en vez de que cada uno
encienda su propio fondo. main.js le pasa posición y ancho; sin
script se queda en opacidad 0 y no estorba. */
.nav__pastilla{
position:absolute; left:0; top:50%; z-index:0;
height:2.05rem; width:0; margin-top:-1.02rem;
border-radius:999px;
background:color-mix(in srgb, var(--dorado-claro) 16%, transparent);
border:1px solid color-mix(in srgb, var(--dorado-claro) 30%, transparent);
opacity:0; pointer-events:none;
transition:transform .42s cubic-bezier(.22,.8,.3,1),
width .42s cubic-bezier(.22,.8,.3,1),
opacity .25s ease;
}
/* En la barra negra el botón va claro: es el único elemento de papel
sobre el negro, y por eso se ve antes que cualquier otra cosa. */
.nav__cta{
background:var(--papel); color:var(--noche) !important;
font-weight:700; border-radius:999px; padding:.5rem 1.05rem;
transition:background-color .25s ease, transform .25s ease;
}
.nav__cta:hover{
background:var(--dorado-claro); color:var(--noche) !important;
transform:translateY(-1px);
}
/* ── botones ─────────────────────────────────────────────────────── */
.boton{
display:inline-block;
font-family:var(--cuerpo); font-weight:600; font-size:.95rem;
padding:.82rem 1.4rem; border:1px solid transparent; border-radius:7px;
text-decoration:none; cursor:pointer; text-align:center;
transition:transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.boton:hover{ transform:translateY(-2px); }
/* el botón principal es negro sobre papel: sobre una paleta clara no
hay acento que pese más que el negro */
.boton--dorado{ background:var(--noche); color:var(--papel); border-color:var(--noche); }
.boton--dorado:hover{ background:var(--tinta); border-color:var(--tinta); }
.boton--linea{ border-color:var(--tinta); color:var(--tinta); background:transparent; }
.boton--linea:hover{ background:var(--tinta); color:var(--papel); }
/* ── fotografías ─────────────────────────────────────────────────
Las fotos son del negocio. Van dentro de un marco con esquinas
redondeadas y overflow oculto, y la imagen las llena con object-fit
para que la proporción del marco mande sobre la del archivo: así una
foto vertical y una horizontal pueden convivir en la misma fila sin
que ninguna se deforme.
Todas llevan width/height en el HTML —aunque el CSS después las
estire— porque es lo que le permite al navegador reservar el hueco
antes de bajarlas y no dar el salto de maquetado al cargar. */
.foto{
position:relative; margin:0;
border-radius:var(--radio); overflow:hidden;
background:var(--nata); border:var(--borde);
}
.foto img{
display:block; width:100%; height:100%;
aspect-ratio:4/3; object-fit:cover;
transition:transform .7s cubic-bezier(.22,.8,.3,1);
}
.foto--alta img{ aspect-ratio:3/4; }
.foto:hover img{ transform:scale(1.045); }
/* El velo del pie de foto llega casi opaco hasta el 55 % de su alto, que
es donde cae el renglón de texto, y recién ahí se disuelve. Con un
degradado que se aclarara antes, una foto de cielo quemado detrás —hay
dos— dejaría el texto por debajo de 4,5:1 y no habría forma de saberlo
midiendo el CSS: el fondo sería la fotografía. */
.foto figcaption{
position:absolute; left:0; right:0; bottom:0;
padding:2rem .9rem .75rem;
font-family:var(--dato); font-size:.72rem; letter-spacing:.06em;
color:var(--papel);
background:linear-gradient(to top,
rgba(6,15,21,.95) 0%, rgba(6,15,21,.95) 55%,
rgba(6,15,21,.55) 78%, transparent 100%);
}
/* ── portada a sangre ────────────────────────────────────────────
La aérea ocupa la primera plana entera y va SIN desenfocar: es la
foto que explica de una sola vez qué es este lugar, y encerrada en
una tarjeta no lo hacía.
El velo no es parejo. Se cierra donde vive el texto y se abre donde
la foto tiene que verse limpia — vertical en el teléfono (foto
arriba, texto abajo) y horizontal en escritorio (texto a la
izquierda, foto a la derecha).
Los porcentajes están medidos, no elegidos a ojo. Sobre una foto
NÍTIDA el peor punto posible es negro puro, así que en la franja
donde cae el texto el velo no puede bajar del 92 %: ahí el bronce
—el color más flojo sobre papel— da 4,9:1 y el texto
secundario 5,5:1. Ojo: con la paleta clara el peor punto ya no es el
pixel más CLARO de la foto sino el más OSCURO, que es el que arrastra
el fondo hacia abajo. Del 60 % en adelante ya no hay texto y el velo
se suelta hasta casi nada. */
.portada{
position:relative; isolation:isolate; overflow:hidden;
min-height:min(100svh, 780px);
display:flex; flex-direction:column; justify-content:flex-end;
/* En el teléfono el texto ocupa casi todo el alto, así que el aire de
arriba es lo único que deja ver la foto: 40svh de padding son ~325 px
de fotografía limpia antes del título. */
padding-top:40svh;
}
.portada__foto{
position:absolute; inset:0; z-index:-2;
width:100%; height:100%;
object-fit:cover; object-position:center 45%;
}
.portada__velo{
position:absolute; inset:0; z-index:-1; pointer-events:none;
/* Móvil: la foto respira arriba y el texto se apoya abajo. El corte del
88 % está en el 76 % medido desde abajo porque ahí es donde empieza
de verdad el bloque de texto —con el padding-top de 40svh—, no donde
quedaría bonito. Con el corte en el 52 %, que fue el primer intento,
el título y la bajada quedaban sobre foto sin velo suficiente: el
texto llega hasta el 73 % del alto de la portada. */
background:linear-gradient(to top,
var(--papel) 0%,
var(--papel) 58%,
color-mix(in srgb, var(--papel) 92%, transparent) 80%,
color-mix(in srgb, var(--papel) 40%, transparent) 91%,
color-mix(in srgb, var(--papel) 10%, transparent) 100%);
}
.portada__caja{
position:relative;
width:min(100% - 2.5rem, var(--ancho));
margin-inline:auto;
padding-bottom:clamp(3rem,7vw,5rem);
}
.portada__texto{ max-width:34rem; }
.portada__titulo{
font-size:clamp(2.2rem, 1.1rem + 3.6vw, 3.6rem);
margin-bottom:1.4rem;
max-width:16ch;
}
.portada__bajada{
font-size:clamp(1.05rem,1rem + .35vw,1.22rem);
color:var(--humo); max-width:56ch; margin-bottom:2.2rem;
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:3.2rem; }
.credenciales{
display:flex; flex-wrap:wrap; gap:1.2rem 2rem;
margin:0; padding-top:1.6rem; border-top:var(--borde);
}
.credenciales__item{ min-width:0; }
.credenciales dt{
font-family:var(--dato); font-size:.66rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--humo); margin-bottom:.4rem;
}
.credenciales dd{ margin:0; display:flex; align-items:baseline; gap:.55rem; }
.credenciales dd strong{
font-family:var(--display); font-weight:600; font-size:1.7rem;
color:var(--bronce); line-height:1;
}
.credenciales dd span{ font-size:.85rem; color:var(--humo); }
/* Horizonte de los siete lagos. Dibujado, no fotografiado: este negocio
no tiene material visual público, así que la portada se sostiene sola. */
.horizonte{ line-height:0; }
.horizonte svg{ display:block; width:100%; height:clamp(140px,20vw,240px); }
.horizonte__cielo{ fill:var(--papel); }
.horizonte__cordon{ fill:var(--lago-6); }
.horizonte__volcan{ fill:var(--lago-7); }
.horizonte__nieve{ fill:var(--papel); }
.horizonte__agua--7{ fill:var(--lago-7); }
.horizonte__agua--6{ fill:var(--lago-6); }
.horizonte__agua--5{ fill:var(--lago-5); }
.horizonte__agua--4{ fill:var(--lago-4); }
.horizonte__agua--3{ fill:var(--lago-3); }
.horizonte__agua--2{ fill:var(--lago-2); }
.horizonte__agua--1{ fill:var(--lago-1); }
/* ── secciones ───────────────────────────────────────────────────── */
.seccion{
position:relative; isolation:isolate; overflow:hidden;
padding:clamp(3.5rem,8vw,6rem) 0;
/* la isla flota encima: sin este margen el título de la sección
aterriza tapado al tocar un enlace del menú */
scroll-margin-top:6.5rem;
--amb:none;
}
.cuenta,.tarifas,.lagos,.reservar{ background:var(--crema); --fondo-local:var(--crema); }
.cabanas,.incluye,.llegar{ background:var(--papel); --fondo-local:var(--papel); }
/* ── ambiente: las mismas fotos, difuminadas, detrás de todo ──────
Cada sección lleva de fondo una foto del propio negocio, desenfocada
hasta que no queda nada legible: sólo manchas de color —el turquesa
del agua, el verde del bosque, la madera— que le sacan a la página el
aire de documento.
Son las MISMAS URL que ya usa el contenido más abajo, así que el
navegador las tiene en caché y el ambiente no cuesta un solo KB extra.
El contraste no queda al azar, y se resuelve en dos capas.
Primero, los archivos `amb-*.jpg` se generan con un TECHO DE
LUMINANCIA de 0,32 y la saturación (×1,8) ya aplicada al pixel. No es
adorno: la foto de la cabaña tiene el cielo quemado y dejaba una
mancha de (252,253,252) —blanco— detrás de la sección. Medido, ahí la
etiqueta "ejemplo", que es el color más flojo de la paleta, caía a
3,6:1. El techo escala los canales del pixel que se pasa, así que
apaga lo quemado sin lavarle el color al resto.
Segundo, encima va un velo del color de la sección entre 72 % y 68 %.
Empezó en 88-85 %, que era seguro pero mataba el color: no se veía el
verde del bosque, que es lo que le da temperatura a la página. Bajarlo
hasta acá se pudo recién después de aclarar --humo y --merma (ver el
comentario de la paleta).
Con las dos capas, el peor punto de la página da 4,9:1 para la
etiqueta y 5,8:1 para el texto secundario.
La saturación va en el archivo y no en `filter: saturate()` a
propósito: así lo que se puede medir en el archivo es exactamente lo
que se ve en pantalla.
El ::before va con z-index:-1 dentro del stacking context que abre
`isolation`, así queda sobre el color de fondo de la sección y bajo
el contenido, sin tocar el texto. */
.seccion::before,
.seccion::after{
content:""; position:absolute; inset:0; z-index:-1;
pointer-events:none;
}
.seccion::before{
background-image:var(--amb);
background-size:cover;
background-position:center;
/* se estira un poco más allá del borde: el desenfoque, si no, deja
una orilla lavada en los cuatro cantos */
inset:-6%;
filter:blur(64px);
}
.seccion::after{
background:linear-gradient(to bottom,
color-mix(in srgb, var(--fondo-local) 78%, transparent),
color-mix(in srgb, var(--fondo-local) 75%, transparent));
}
.aguas { --amb:url("../imagenes/amb-piscina-techada.jpg"); }
.cuenta { --amb:url("../imagenes/amb-piscina-atardecer.jpg"); }
.cabanas { --amb:url("../imagenes/amb-cabana.jpg"); }
.tarifas { --amb:url("../imagenes/amb-cabana.jpg"); }
.incluye { --amb:url("../imagenes/amb-sendero.jpg"); }
.lagos { --amb:url("../imagenes/amb-sendero.jpg"); }
.llegar { --amb:url("../imagenes/amb-piscina-atardecer.jpg"); }
.reservar{ --amb:url("../imagenes/amb-piscina-techada.jpg"); }
.titular{ max-width:64ch; margin:0 auto clamp(2.5rem,5vw,3.5rem); text-align:center; }
.titular--izq{ margin-inline:0; text-align:left; }
.titular h2{ font-size:clamp(1.75rem,1.2rem + 2.1vw,2.75rem); margin-bottom:1rem; }
.titular__bajada{ color:var(--humo); margin:0; }
.caja--doble{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
.caja--doble > *{ min-width:0; }
/* ═══ LA CUENTA CLARA · pieza firma ═══════════════════════════════
Dos boletas dibujadas en SVG, una por canal de venta. Cada una es
su propio