/* ============================================================
   LOOM Landing — resto de la pagina. Se carga sin bloquear el render.

   Reproduce el aspecto de loomalmabeach.com. Sistema y por que de cada
   valor: ver la cabecera de critical.css.
   ============================================================ */

/* ---------- Cabecera de seccion ----------
   Centrada, terracota, peso 600 e interlineado por debajo del cuerpo
   de letra, como en el sitio. */
.seccion__cab{max-width:900px;margin:0 auto 44px;text-align:center}
/* La distancia del titular a su contenido no es la misma en todas las
   franjas. Medida una a una en produccion. */
.amenidades .seccion__cab{margin-bottom:19px}
.producto .seccion__cab,
.tesis .seccion__cab{margin-bottom:30px}
.respaldo .seccion__cab{margin-bottom:53px}
.faq .seccion__cab{margin-bottom:20px}
.seccion__cab--centro{margin-inline:auto;text-align:center}
.seccion__titulo{
	font-size:clamp(28px,4.6vw,47px);
	/* Interlineado 1.0 de base. Cada seccion tiene el suyo, medido uno a
	   uno en produccion: amenidades 1.31, producto 1.00, valorizacion 1.00,
	   respaldo 0.91, formulario 0.97, preguntas 1.30. */
	line-height:1;
	font-weight:600;
	letter-spacing:0;
	color:var(--loom-marca);
	margin:0 auto .4em;
}
.seccion__entrada{font-size:16px;line-height:1.65;margin:0 auto;max-width:70ch;color:var(--loom-texto)}
.seccion__acciones{margin:44px 0 0;text-align:center}
.aliados .seccion__acciones{margin-top:34px}
.respaldo .seccion__acciones{margin-top:30px}
.tesis .seccion__acciones{margin-top:20px}

/* Sin separadores: el sitio no usa ninguno. La clase queda inerte. */
.linea{border:0;margin:0}

/* ---------- La imagen grande ---------- */
.destacada{padding-block:60px 80px}
.destacada__figura{margin:0}
.destacada__img{width:100%;border-radius:21px}  /* medido: 21, no 13 */

/* ---------- El plano, bajo "Valorizacion" ---------- */
/* Este titular ocupa el ancho entero de la columna y va en UNA linea:
   con el tope de 900 de la cabecera se partia en dos y estiraba la
   franja 47 px de mas. */
.tesis .seccion__cab{max-width:none}
.tesis .seccion__titulo{line-height:1;max-width:none}
.tesis__plano{margin:0;text-align:center}
.tesis__plano-img{width:100%;max-width:1024px;margin-inline:auto;border-radius:0}

/* ---------- Ficha ----------
   Tarjetas beige de esquina 28px, que es el recurso del sitio para
   bloques de datos. Sin borde y sin sombra. */
.ficha__lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin:0}
.ficha__item{
	background:var(--loom-arena);
	border-radius:var(--r-beige);
	padding:34px 28px;
	text-align:center;
	display:flex;
	flex-direction:column;
	align-items:center;
}
.ficha__dato{
	font-size:clamp(26px,3.4vw,34px);
	font-weight:600;
	line-height:1.05;
	color:var(--loom-sobre-arena);
	margin:0 0 12px;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:2.1em;
	max-width:10ch;
}
.ficha__desc{margin:0;font-size:14px;line-height:1.45;color:var(--loom-sobre-arena);max-width:28ch}

/* ---------- Ubicacion ----------
   Lista de 24px con icono, en gris de marca. Sin lineas separadoras. */
.ubicacion__grid{display:grid;gap:40px;align-items:center}
.ubicacion__lista{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.ubicacion__lista li{display:flex;gap:18px;align-items:center;font-size:20px;line-height:1.25;color:var(--loom-texto)}
.ubicacion__icono{flex:0 0 auto;width:46px;height:46px;object-fit:contain;border-radius:0}
.ubicacion__media{position:relative}
.ubicacion__img{width:100%;border-radius:var(--r-base)}

/* ---------- Producto ----------
   El bloque de "Asi se veria tu proyecto" va sobre foto con velo
   terracota al 88%, que es el unico uso de transparencia de color del
   sitio. El titular ahi va en blanco. */
.producto{position:relative;isolation:isolate}
/* En produccion no hay foto debajo: es el terracota de marca al 88% sobre
   el blanco de la pagina. Se escribe asi, y no con el color ya mezclado,
   para que sea el mismo valor que tiene el sitio. */
.producto--sobre-foto{background-color:rgba(179,95,39,.88)}
.producto--sobre-foto .seccion__titulo{color:#fff;font-size:clamp(28px,4.6vw,46px);line-height:1;max-width:640px}
.producto--sobre-foto .seccion__entrada{color:#fff}
.producto__plano{margin:0 0 40px}
.producto__plano-img{width:100%;border-radius:var(--r-base)}

.galeria{position:relative}
.galeria__pista{list-style:none;display:flex;gap:4px;margin:0;padding:0 0 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.galeria__pista::-webkit-scrollbar{display:none}
.galeria__slide{flex:0 0 94.9%;scroll-snap-align:center}
/* 558x291 medido en el carrusel del sitio. */
.galeria__img{width:100%;aspect-ratio:558/291;object-fit:cover;background:#efece7;border-radius:var(--r-base)}
/* El carrusel del sitio ocupa la columna entera (1140), sin el relleno
   lateral del contenedor, y en movil llega de borde a borde. */
.galeria{position:relative;margin-inline:-20px}
.galeria__controles{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 8px;pointer-events:none;margin:0}
.galeria__btn{pointer-events:auto;background:rgba(255,255,255,.92);border-color:#fff}
.galeria__btn{width:46px;height:46px;border-radius:50%;border:2px solid var(--loom-marca);background:transparent;color:var(--loom-marca);font-size:20px;line-height:1;cursor:pointer;transition:background .3s ease,color .3s ease}
.galeria__btn:hover{background:var(--loom-marca);color:#fff}

/* Fondos de seccion, como los pone el sitio. */
.amenidades,.tesis,.faq,.captura,.producto{background-size:cover;background-position:center;background-repeat:no-repeat}

/* El titular de preguntas va en blanco sobre la foto, con velo para que
   se lea: medido en vivo, 30px peso 600 y color #FFFFFF. */
.faq .seccion__titulo{color:#fff}

/* ---------- Amenidades ----------
   Cinco fotos: dos arriba de 635x343 y tres abajo de 417x343, con 20 de
   hueco, dentro de 1290 de contenido. Esquina RECTA, no redondeada.
   La rejilla es de seis columnas: 3+3 en la primera fila y 2+2+2 en la
   segunda dan exactamente esos anchos. */
.amenidades .seccion__titulo{font-size:clamp(26px,4vw,39px);line-height:1.31}
.amenidades__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.amenidades__grid > li:nth-child(-n+2){grid-column:span 3}
.amenidades__grid > li:nth-child(n+3){grid-column:span 2}
.amenidades__foto{width:100%;height:343px;object-fit:cover;border-radius:0}
@media (max-width:900px){
	.amenidades__grid{grid-template-columns:1fr 1fr;gap:12px}
	/* Mismo peso que las reglas de escritorio (:nth-child), si no, no ganan. */
	.amenidades__grid > li:nth-child(-n+2),
	.amenidades__grid > li:nth-child(n+3){grid-column:auto}
	.amenidades__grid > li:nth-child(1){grid-column:1 / -1}
	.amenidades__foto{height:200px}
}
@media (max-width:520px){
	.amenidades__grid{grid-template-columns:1fr}
	.amenidades__grid > li:nth-child(1){grid-column:auto}
	.amenidades__foto{height:220px}
}

/* ---------- Tesis: tres tarjetas beige ----------
   Medido en vivo sobre loomalmabeach.com: las tarjetas de "Uso Residencial",
   "Retorno a la inversion" y "Valorizacion por Etapas" van sobre beige
   #DDCFBD, con titulo de 24px peso 600. No llevan borde. */
/* Medido: 360x298, radio 28, relleno de 20 arriba y 44 a los lados,
   contenido centrado, y los iconos a su tamaño natural (106x78, 80x89,
   63x86), no recortados a un cuadrado. */
.tesis__grid{list-style:none;margin:0 auto;padding:0;max-width:1120px;display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.tesis__grid{grid-template-columns:repeat(3,1fr)}}
.tesis__card{
	background:var(--loom-arena);
	border:0;
	border-radius:var(--r-beige);
	padding:20px 22px;

	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:20px;
}
.tesis__card-icono{width:auto;height:auto;max-width:110px;max-height:90px;object-fit:contain;border-radius:0;margin:0}
/* El terracota de marca sobre la arena da 3,37:1: pasa como texto grande
   (24px) y por eso el titulo va con el color exacto del sitio. */
.tesis__card-titulo{font-size:24px;line-height:1.3;font-weight:600;margin:0;color:var(--loom-sobre-arena)}
@media (min-width:768px){.tesis__card{min-height:298px}}
/* El parrafo va a 14px, donde 3,37:1 ya NO pasa. Es el unico color que se
   aparta del sitio, y es para que el texto se pueda leer: 5,12:1. */
.tesis__card-texto{margin:0;max-width:272px;font-size:14px;line-height:1.35;color:var(--loom-sobre-arena)}
.tesis__cuerpo{display:block}
.tesis__media{display:none}

/* ---------- Respaldo: banda terracota ----------
   "Te acompañamos en el proceso de compra" va sobre fondo terracota
   solido, con el titular en blanco a 45px. */
.respaldo{background:var(--loom-gris)}
.respaldo .seccion__titulo{color:var(--loom-sobre-arena);font-size:clamp(28px,4.4vw,45px);line-height:.91;max-width:560px}
/* Sobre terracota el boton no puede ir terracota. Va en arena con letra
   oscura, igual que el de la franja de respaldo. */
.producto .btn{background:var(--loom-arena);color:var(--loom-sobre-arena)}
.producto .btn:hover{background:#cbb99f}
.producto .btn:focus-visible{outline-color:#fff}

.respaldo__sub{font-size:clamp(20px,2.6vw,26px);font-weight:600;color:#fff;line-height:1.2;margin:0 0 .6em;text-align:center}
.respaldo__intro{max-width:74ch;margin:0 auto 40px;color:#fff;text-align:center;font-size:16px}
.respaldo__media{margin:0 0 40px}
.respaldo__img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-base)}

.respaldo__equipo{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.respaldo__rol{background:var(--loom-arena);border-radius:var(--r-beige);padding:28px 26px}
.respaldo__rol-titulo{font-size:16px;font-weight:600;color:var(--loom-sobre-arena);margin:0 0 10px}
.respaldo__rol-texto{margin:0;font-size:12px;line-height:1.6;color:var(--loom-sobre-arena);text-align:justify}

/* ---------- Preguntas: acordeon terracota ----------
   Cabecera de 11px de radio sobre fondo terracota, texto en arena.
   Ojo: esa combinacion da 3.00:1, que no pasa el minimo para texto
   normal. Se conserva porque es el diseño del sitio, pero el texto va
   a 18px en peso 600, que es el umbral donde SI lo pasa como texto
   grande. Es el unico ajuste que hice y es para no incumplir. */
/* Medido: cabecera de 889x48 con radio 11 sobre terracota, y la respuesta
   en su propia caja con borde blanco de 3px y radio 15. Entre cabeceras
   cerradas NO hay hueco.
   El texto de la cabecera va en blanco y no en arena: arena sobre
   terracota da 3,37:1 y a 16px no se lee. Blanco da 4,58:1. Es la unica
   desviacion de color de esta seccion. */
/* El sitio las pega sin hueco. Pegadas se leen como un bloque unico,
   sobre todo en movil cuando cada pregunta ocupa dos lineas, asi que
   van separadas 10. */
.faq__lista{display:grid;gap:10px}
.faq__item{background:transparent;border-radius:0}
.faq__pregunta{
	padding:11px 52px 11px 35px;
	min-height:48px;
	display:flex;
	align-items:center;
	background:var(--loom-marca);
	border-radius:var(--r-faq);
	font-weight:600;
	font-size:16px;
	line-height:1.6;
	color:#fff;
	cursor:pointer;
	position:relative;
	list-style:none;
}
.faq__pregunta::-webkit-details-marker{display:none}
.faq__pregunta::after{
	content:"";position:absolute;right:22px;top:50%;
	width:10px;height:10px;margin-top:-7px;
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
	transform:rotate(45deg);
	transition:transform .3s ease;
}
.faq__item[open] .faq__pregunta::after{transform:rotate(-135deg);margin-top:-2px}
.faq__pregunta:focus-visible{outline:3px solid #fff;outline-offset:-4px}
.faq__respuesta{margin:0;padding:24px;border:3px solid #fff;border-radius:15px;font-size:16px;line-height:1.65;color:#fff}
.faq__respuesta p{margin:0 0 .8em}
.faq__respuesta p:last-child{margin-bottom:0}
.faq__respuesta ul{margin:.5em 0 0;padding-left:20px}
.faq__respuesta li{margin-bottom:.35em}
.faq .seccion__titulo{font-size:clamp(24px,3.2vw,30px);line-height:1.3}
/* Y el boton del final es un contorno blanco sobre la foto. */
.faq .btn{background:transparent;border:2px solid #fff;color:#fff}
.faq .btn:hover{background:#fff;color:var(--loom-marca)}
.faq .btn:focus-visible{outline-color:#fff}

/* ---------- Captura ----------
   "Dejanos tus datos" es el titular mas grande del sitio: 65px. */
/* Sin color de fondo: en el sitio solo esta el grafico beige, y lo que
   queda fuera de el es el blanco de la pagina. */
.captura{background:transparent}
.captura .seccion__titulo{font-size:clamp(34px,6.4vw,65px);line-height:.97;text-align:left;margin:0 0 45px;max-width:330px}
.captura__grid{display:grid;gap:40px}
.captura__intro{text-align:left}
/* La columna de texto del sitio es estrecha: el titular va a 323 y las
   vinetas a 301, de ahi que cada una ocupe dos lineas. */
.captura__bullets{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:19px;max-width:340px}
.captura__bullets li{display:flex;gap:12px;align-items:flex-start;font-size:24px;line-height:1.2;color:var(--loom-texto)}
.captura__bullets svg{flex:0 0 auto;margin-top:.35em;color:var(--loom-marca)}
.captura__wa{margin:0}

/* Formulario propio, por si se vuelve a el desde el panel */
.form{background:#fff;color:var(--loom-texto);padding:28px;border-radius:var(--r-base)}
.form__campo{margin:0 0 18px;display:block}
.form__campo label{display:block;font-size:14px;font-weight:600;color:var(--loom-marca);margin-bottom:7px}
.form__campo input,.form__campo select{width:100%;padding:14px 16px;font:inherit;font-size:16px;border:1px solid var(--loom-arena);border-radius:var(--r-base);background:#fff;color:inherit;min-height:50px}
.form__campo input:focus,.form__campo select:focus{outline:0;border-color:var(--loom-marca)}
.form__nota{display:block;margin-top:7px;font-size:13px;color:var(--loom-texto);line-height:1.5}
.form__consent{display:block;margin:0 0 20px;font-size:13px;line-height:1.6;color:var(--loom-texto)}
.form__consent label{display:flex;gap:10px;align-items:flex-start}
.form__consent input{margin-top:.25em;width:18px;height:18px;flex:0 0 auto;accent-color:var(--loom-marca)}
.form__consent a{text-decoration:underline}
.form__enviar{margin:0}

.aviso{padding:15px 18px;margin:0 0 18px;font-size:15px;border-radius:var(--r-base);border:1px solid}
.aviso--ok{background:#F2F7F3;color:#1F5130;border-color:#CBE0D2}
.aviso--error{background:#FCF1EE;color:#8A2E1F;border-color:#F0CFC6}
.aviso ul{margin:0;padding-left:18px}

/* Formulario embebido de GoHighLevel.
   El contenedor reserva el alto desde el primer pintado: sin eso, cuando
   el iframe carga empuja media pagina y se dispara el CLS. */
.captura__ghl{background:#fff;overflow:hidden;border-radius:var(--r-base)}
.captura__ghl-marco{display:block;width:100%;border:0}

/* ---------- Pagina de gracias ---------- */
.gracias{text-align:center}
.gracias__titulo{font-size:clamp(28px,5vw,47px);line-height:.95;margin:0 auto .5em;max-width:22ch;color:var(--loom-marca)}
.gracias__sub{font-size:17px;line-height:1.65;max-width:56ch;margin:0 auto 40px}
.gracias__pasos{list-style:none;margin:0 auto 40px;padding:0;display:grid;gap:16px;text-align:left;max-width:640px}
.gracias__paso{display:grid;grid-template-columns:auto 1fr;gap:0 20px;padding:24px;background:var(--loom-arena);border-radius:var(--r-beige)}
.gracias__paso-n{font-size:15px;font-weight:600;color:var(--loom-sobre-arena)}
.gracias__paso-texto strong{display:block;font-size:16px;font-weight:600;color:var(--loom-sobre-arena);margin-bottom:5px}
.gracias__paso-texto span{font-size:14px;line-height:1.6;color:var(--loom-sobre-arena)}
.gracias__bloque{padding:30px 28px;margin:0 auto 20px;max-width:640px;border:3px solid var(--loom-marca);border-radius:var(--r-tarjeta);text-align:left}
.gracias__bloque--wa{background:var(--loom-marca);border-color:var(--loom-marca);color:#fff}
.gracias__bloque--wa .gracias__bloque-titulo{color:#fff}
.gracias__bloque--brochure{background:#fff}
.gracias__bloque-titulo{font-size:20px;font-weight:600;margin:0 0 .5em;color:var(--loom-marca)}
.gracias__bloque p{margin:0 0 1.2em;font-size:15px;line-height:1.6}
.gracias__acciones{margin:0}
.gracias__pendiente{margin:0!important}
.gracias__cuerpo{text-align:left;margin:30px auto 0;max-width:640px}
.gracias__volver{margin:40px 0 0}
.gracias__volver a{text-decoration:underline;font-size:15px}

/* ---------- Pie ---------- */
/* Banda de 105 de alto: 40 + 25 de linea + 40. Medido. */
.loom-footer{padding:40px 0;background:var(--loom-marca);color:#fff;font-size:19px;font-weight:400;line-height:1.3;text-align:center}
.loom-footer__texto{margin:0}
.loom-footer__links{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;font-size:15px}
.loom-footer__links a{text-decoration:underline}

/* ---------- WhatsApp ---------- */
.loom-wa{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--r-pildora);background:#25d366;color:#0b2e18;font-weight:600;font-size:15px;text-decoration:none;min-height:50px}
.loom-wa__icon{flex:0 0 auto}
.loom-wa__texto{white-space:nowrap}
.btn--wa{background:#25d366;color:#0b2e18}
.btn--wa:hover{background:#1eb457;color:#062012}

@media (max-width:767px){
	.loom-wa--sticky{left:14px;right:14px;bottom:14px;justify-content:center;padding:15px 18px;border-radius:var(--r-base)}
	body:has(.loom-wa--sticky){padding-bottom:84px}
}

/* ---------- Aparicion al hacer scroll ----------
   Solo desplazamiento, nunca opacidad: un texto a medio desvanecer
   incumple contraste mientras dura la transicion, y la auditoria lo
   captura a media animacion. */
@keyframes loom-subir{
	from{transform:translateY(20px)}
	to  {transform:translateY(0)}
}
@keyframes loom-destapar{
	from{opacity:.001}
	to  {opacity:1}
}
.loom-js .loom-aparece.esta-dentro{animation:loom-subir .45s cubic-bezier(.22,.61,.36,1) both}
.loom-js .loom-aparece--media{opacity:0}
.loom-js .loom-aparece--media.esta-dentro{animation:loom-destapar .6s ease both}
.loom-js .loom-aparece--lista.esta-dentro > *{animation:loom-subir .4s cubic-bezier(.22,.61,.36,1) both}
.loom-js .loom-aparece--lista.esta-dentro > *:nth-child(2){animation-delay:55ms}
.loom-js .loom-aparece--lista.esta-dentro > *:nth-child(3){animation-delay:110ms}
.loom-js .loom-aparece--lista.esta-dentro > *:nth-child(4){animation-delay:165ms}
.loom-js .loom-aparece--lista.esta-dentro > *:nth-child(n+5){animation-delay:220ms}
.loom-js .loom-aparece--lista.esta-dentro{animation:none}

@media (prefers-reduced-motion:reduce){
	.loom-js .loom-aparece--media{opacity:1}
	.loom-js .loom-aparece.esta-dentro,
	.loom-js .loom-aparece--media.esta-dentro,
	.loom-js .loom-aparece--lista.esta-dentro > *{animation:none}
}

@media (min-width:768px){
	.galeria__slide{flex:0 0 48.95%}
}

@media (min-width:901px){
	.ubicacion__grid{grid-template-columns:1fr 1fr;gap:56px}
	.captura__grid{grid-template-columns:1fr 1fr;gap:52px;align-items:center}
	.form{padding:34px}
	/* En el sitio se ven DOS renders a la vez, no tres. */
	.galeria__slide{flex:0 0 48.95%}
}

@media print{
	.loom-wa,.hero__video,.hero__pausa{display:none!important}
}

@media (min-width:901px){
	/* En produccion el formulario va a la izquierda y el texto a la
	   derecha. En el HTML el texto va primero para que en movil se lea
	   antes el porque, y aqui se intercambian. */
	.captura__intro{order:2}
	.captura__form{order:1}
}

/* ============================================================
   MOVIL — la escala del sitio, medida a 390 px

   El sitio no usa los mismos tamaños que en escritorio: los encoge
   bastante. Medido uno a uno en loomalmabeach.com a 390 px:

     tarjetas de beneficio   3 en fila + 1 centrada debajo, de 98x138
     titulo de beneficio     10-11px   -> aqui 12, que es el minimo legible
     "Amenidades premium"    interlineado 24 (0,92)
     "Valorizacion..."       20px
     "Te acompanamos..."     21px
     titulo de tarjeta beige 16px, interlineado 21
     "Dejanos tus datos"     32px
     vinetas del formulario  12px       -> aqui 13
     "Preguntas frecuentes"  23px
     pregunta del acordeon   14px, cabecera de 53, columna de 304
     pie                     12px       -> aqui 13

   Los dos valores que suben (12 y 13) son los unicos que se apartan
   del sitio, y es porque por debajo de 12 px el texto deja de leerse
   en un telefono.
   ============================================================ */
@media (max-width:767px){

	.amenidades .seccion__titulo{line-height:.92}
	.tesis .seccion__titulo{font-size:20px;line-height:1}
	.respaldo .seccion__titulo{font-size:21px;line-height:1}

	/* A 16px el terracota de marca sobre la arena ya no pasa el minimo
	   (2,99:1 frente al 4,5:1 que pide el texto normal). En movil, y solo
	   en movil, va el mismo tono tres puntos mas oscuro: 5,12:1. */
	.tesis__card-titulo{font-size:16px;line-height:1.3;color:var(--loom-sobre-arena)}
	.tesis__card-texto{font-size:13px}

	.captura .seccion__titulo{font-size:32px;margin-bottom:26px}
	.captura__bullets{gap:14px;max-width:none}
	.captura__bullets li{font-size:13px;line-height:1.5}
	.captura__bullets svg{width:15px;height:15px;margin-top:.2em}

	.faq .seccion__titulo{font-size:23px}
	.loom-wrap--faq{max-width:344px}
	.faq__pregunta{font-size:14px;line-height:1.5;padding:11px 40px 11px 24px;min-height:53px}
	.faq__pregunta::after{right:16px}
	.faq__respuesta{padding:16px;font-size:14px}

	.loom-footer{padding:28px 0;font-size:13px}
}

/* ---------- Tableta ----------
   Entre 768 y 1023 la pagina ya va a varias columnas pero cada una es
   estrecha. Sin bajar un punto la letra, el titulo de la tarjeta beige
   se parte en dos lineas y la tarjeta crece a 346. Escala intermedia. */
@media (min-width:768px) and (max-width:1023px){

	.tesis__card{padding:20px 16px}
	.tesis__card-titulo{font-size:19px}
	.tesis__card-texto{font-size:13px}

	.captura__bullets li{font-size:18px}
}

/* ============================================================
   MAQUETACION DE LA REFERENCIA (Zante, index2) - resto de la portada

   Medido alli: contenedor 1200, secciones 60/80, cabeceras centradas con
   filete, filas asimetricas 4/8 y 7/5, franjas gris / color / gris, y un
   pie oscuro en columnas.
   ============================================================ */

/* ---------- Presentacion: texto 4 / foto 8 ----------
   La fila "ABOUT" de la referencia. */
/* minmax(0,1fr) y no la columna implicita: con auto, un hijo con mucho
   contenido (la pista del carrusel mide 2.152 px) ensancha la columna y la
   seccion se sale de su caja en movil. Medido: 414 px en una caja de 350. */
.presentacion{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
@media (min-width:900px){.presentacion{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px}}
.presentacion__texto .seccion__titulo{font-size:clamp(26px,3.2vw,36px);line-height:1.12;margin:0 0 22px;
	text-align:left;max-width:none}
.presentacion__parrafo{font-size:16px;line-height:1.72;margin:0;color:var(--loom-texto)}
.presentacion__texto .seccion__acciones{text-align:left;margin-top:28px}

/* ---------- Amenidades: carrusel 7 / lista 5, franja gris ----------
   La fila "OUR AWESOME SERVICES" de la referencia. */
.amenidades{background:var(--loom-gris)}
.amenidades .seccion__cab{margin-bottom:44px}
.servicios{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
@media (min-width:900px){.servicios{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:52px}}
.servicios--solo-fotos{grid-template-columns:minmax(0,1fr)}
.servicios__galeria{margin-inline:0}
.servicios__galeria .galeria__pista{gap:20px;padding:0}
.servicios__galeria .galeria__slide{flex:0 0 100%}
.servicios__galeria .galeria__img{aspect-ratio:670/424;height:auto;border-radius:var(--r-beige)}
.servicios__lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.servicios__item{display:flex;align-items:center;gap:16px;padding:14px 18px;background:#fff;
	border-radius:var(--r-tarjeta);box-shadow:0 10px 30px -22px rgba(126,66,27,.5)}
.servicios__icono{flex:0 0 48px;height:48px;border-radius:50%;background:var(--loom-gris);
	display:flex;align-items:center;justify-content:center;color:var(--loom-sobre-arena)}
.servicios__icono svg,.servicios__icono img{width:26px;height:26px;border-radius:0}
.servicios__nombre{font-size:16px;line-height:1.35;font-weight:500;color:var(--loom-sobre-arena)}

/* ---------- Producto: carrusel de tarjetas, franja de color ----------
   "GALLERY PHOTOS" de la referencia: varias tarjetas blancas a la vista. */
.producto .galeria{margin-inline:0}
.producto .galeria__pista{gap:20px}
.producto .galeria__slide{flex:0 0 86%;scroll-snap-align:start;background:#fff;padding:10px;border-radius:var(--r-beige)}
@media (min-width:600px){.producto .galeria__slide{flex-basis:calc((100% - 20px) / 2)}}

.producto .galeria__img{aspect-ratio:3/2;border-radius:18px}

/* ---------- Respaldo: tres tarjetas blancas, franja gris ----------
   "WHAT PEOPLE SAY ABOUT US" de la referencia: icono en circulo arriba,
   titular y texto. */
.respaldo .tesis__card{background:#fff;box-shadow:0 22px 50px -30px rgba(126,66,27,.55);padding:36px 28px 38px;gap:18px}
.respaldo .tesis__card-icono{width:88px;height:88px;max-width:none;max-height:none;padding:18px;border-radius:50%;
	background:var(--loom-gris);object-fit:contain;box-sizing:border-box}
.respaldo .tesis__card-titulo{font-size:22px}
.respaldo .tesis__card-texto{color:var(--loom-texto);font-size:15px;line-height:1.55}

/* ---------- Flechas de los carruseles ----------
   Van ENCIMA de las fotos. Habia una regla que les daba fondo blanco, pero
   la siguiente la pisaba con background:transparent y quedaba un circulo
   terracota sobre una foto cualquiera. Con fondo blanco: 4,58:1 fijo. */
.galeria__btn{background:rgba(255,255,255,.94);border-color:#fff}
.galeria__btn:hover{background:var(--loom-marca);border-color:var(--loom-marca);color:#fff}

/* ---------- Tesis ---------- */
.tesis .seccion__cab{margin:0 auto 34px}

/* ---------- Captura: cabecera centrada encima del 6/6 ----------
   "LOCATION - CONTACT US" de la referencia. */
.captura .seccion__cab{margin:0 auto 44px}
.captura .seccion__titulo{font-size:clamp(28px,3.8vw,40px);line-height:1.12;text-align:center;margin:0 auto;max-width:none}

/* ---------- Preguntas ---------- */
.faq .seccion__cab{margin-bottom:34px}

/* ---------- Pie oscuro en columnas ----------
   El footer "dark" de la referencia. Tonos de LOOM, no su #272727.
   Texto claro sobre el fondo da 9,4:1; el de la base, 6,5:1. */
.loom-footer{background:#221D1A;color:#CBC1B7;padding:0;font-size:15px;font-weight:400;line-height:1.6;text-align:left}
.loom-footer__rejilla{display:grid;gap:36px 48px;padding-block:64px 44px;
	grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.loom-footer__logo{display:block;width:auto;height:44px;margin:0 0 18px;border-radius:0}
.loom-footer__parrafo{margin:0;max-width:340px}
.loom-footer__titulo{font-size:16px;font-weight:600;color:#fff;margin:0 0 16px}
.loom-footer__lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.loom-footer a{color:#fff;text-decoration:none}
.loom-footer a:hover{color:var(--loom-champagne);text-decoration:underline}
.loom-footer__base{border-top:1px solid rgba(255,255,255,.1)}
.loom-footer__texto{margin:0;padding-block:20px;font-size:14px;color:#A89E94}
@media (max-width:767px){
	.loom-footer{font-size:14px}
	.loom-footer__rejilla{padding-block:48px 32px}
}

/* ---------- Segundo formulario (arriba) ----------
   Franja de arena, titulo centrado y el formulario centrado debajo. Sin la
   lista de ventajas: esa va en el principal, y repetirla es lo que haria
   que pareciera la misma seccion dos veces. */
.captura--arriba{background:var(--loom-arena)}
.captura--arriba .seccion__cab{margin:0 auto 32px}
.captura--arriba .seccion__titulo{color:var(--loom-sobre-arena)}
.captura--arriba .seccion__entrada{color:var(--loom-sobre-arena);max-width:560px;margin:14px auto 0}
.captura--arriba .captura__grid{grid-template-columns:minmax(0,1fr);max-width:720px;margin-inline:auto}
.captura--arriba .captura__ghl{border-radius:var(--r-beige);box-shadow:0 22px 50px -30px rgba(126,66,27,.55)}

/* ---------- Formulario principal: texto 5 / formulario 7 ----------
   Antes: titular centrado arriba, formulario a la izquierda y las viñetas
   flotando a media altura de un formulario de 704 px. Ahora el titular y
   las viñetas forman una columna que acompaña al formulario mientras se
   rellena (sticky), sobre una franja gris que enmarca la tarjeta blanca. */
.captura:not(.captura--arriba){background:var(--loom-gris)}
.captura:not(.captura--arriba) .seccion__titulo{font-size:clamp(30px,3.2vw,42px);line-height:1.1;text-align:left;margin:0 0 30px;max-width:14ch}
.captura:not(.captura--arriba) .captura__bullets{max-width:none;gap:0;margin:0;border-top:1px solid var(--loom-linea)}
.captura:not(.captura--arriba) .captura__bullets li{align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--loom-linea);
	font-size:18px;line-height:1.4;font-weight:500;color:var(--loom-sobre-arena)}
.captura:not(.captura--arriba) .captura__bullets svg{width:36px;height:36px;padding:9px;margin:0;border-radius:50%;box-sizing:border-box;
	background:#fff;color:var(--loom-marca);box-shadow:0 0 0 1px var(--loom-linea)}
.captura:not(.captura--arriba) .captura__ghl{border-radius:var(--r-beige);box-shadow:0 0 0 1px rgba(221,207,189,.7),0 30px 60px -34px rgba(126,66,27,.5)}
@media (min-width:901px){
	.captura:not(.captura--arriba) .captura__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
	.captura:not(.captura--arriba) .captura__intro{order:1;position:sticky;top:120px}
	.captura:not(.captura--arriba) .captura__form{order:2}
}
@media (max-width:767px){
	.captura:not(.captura--arriba) .seccion__titulo{font-size:28px;margin-bottom:22px}
	.captura:not(.captura--arriba) .captura__bullets li{font-size:15px;gap:12px;padding:12px 0}
	.captura:not(.captura--arriba) .captura__bullets svg{width:30px;height:30px;padding:7px}
}
/* Dentro de la columna de 8 de /contacto/: una sola columna, sin franja y
   con las viñetas antes del formulario. */
.pagina-cuerpo__principal .captura:not(.captura--arriba){background:transparent}
.pagina-cuerpo__principal .captura:not(.captura--arriba) .captura__grid{grid-template-columns:minmax(0,1fr);gap:32px}
.pagina-cuerpo__principal .captura:not(.captura--arriba) .captura__intro{order:0;position:static}
.pagina-cuerpo__principal .captura:not(.captura--arriba) .captura__form{order:1}
.pagina-cuerpo__principal .captura:not(.captura--arriba) .seccion__titulo{max-width:none}

/* ---------- Correcciones de Cristian ----------
   El boton de videollamada en otro color (se confundia con un texto sobre
   la foto), las fotos en lugar del plano en valorizacion y los nombres de
   las amenidades como botones que llevan a su foto. */
.btn.btn--video{background:#221D1A;color:#fff;border-color:#221D1A}
.btn.btn--video:hover{background:#000;color:#fff;border-color:#000}
.tesis__fotos{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.tesis__foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-beige)}
@media (max-width:767px){.tesis__fotos{grid-template-columns:minmax(0,1fr);gap:14px}}
.servicios__boton{display:flex;align-items:center;gap:inherit;width:100%;padding:0;margin:0;border:0;background:none;
	font:inherit;color:inherit;text-align:left;cursor:pointer}
.servicios__boton:hover .servicios__nombre{text-decoration:underline;text-underline-offset:3px}
.servicios__boton:focus-visible{outline:2px solid var(--loom-marca);outline-offset:4px;border-radius:6px}
.servicios__boton[aria-pressed="true"] .servicios__nombre{color:var(--loom-marca);font-weight:600}