/* =========================================================
We love to travel — hoja de estilos
Paleta tomada del logo:
teal #10A5B5 · naranja #F5871F · rosa #EE4E9B
verde profundo #1F4D46 · verde medio #2F6B5E
terracota #A8552F · oliva #A3B33C
========================================================= */
/* =========================================================
Poppins alojada en el propio sitio (assets/fonts/)
Ya no dependemos de Google Fonts: la fuente viaja con el proyecto,
así que carga igual en local y en producción.
Poppins © The Poppins Project Authors, SIL Open Font License 1.1
(el texto de la licencia está en assets/fonts/OFL.txt).
Para sumar un peso: copia un bloque, cambia font-weight y el archivo.
========================================================= */
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:300; font-display:swap;
src:url("../fonts/poppins-300-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:300; font-display:swap;
src:url("../fonts/poppins-300-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap;
src:url("../fonts/poppins-400-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap;
src:url("../fonts/poppins-400-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap;
src:url("../fonts/poppins-500-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap;
src:url("../fonts/poppins-500-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap;
src:url("../fonts/poppins-600-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap;
src:url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap;
src:url("../fonts/poppins-700-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap;
src:url("../fonts/poppins-700-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root{
--teal: #10A5B5;
--teal-dark: #0B7C89;
--teal-light: #7FD4DD;
--teal-soft: #E6F7F9;
--orange: #F5871F;
--orange-dark: #D96F0C;
--pink: #EE4E9B;
--green-deep: #1F4D46;
--green-mid: #2F6B5E;
--olive: #A3B33C;
--terracota: #A8552F;
--ink: #12312E;
--body: #4A6360;
--line: #DCE9E7;
--bg: #FFFFFF;
--bg-alt: #F4FAFA;
/* Textura de doodles del flyer para los fondos blancos de todo el sitio.
Para quitarla en una zona: background-image:none. Para cambiar el tamaño
del patrón, toca --doodles-size (a mayor valor, iconos más grandes). */
--doodles: url("../img/doodles-rosa.svg");
--doodles-size: 420px;
/* verde turquesa del logo: color de los textos sobre fondo blanco */
--green-ink: #0B7C89;
--cream: #FFF9F0;
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 10px 30px rgba(18,49,46,.08);
--shadow-lg: 0 20px 50px rgba(18,49,46,.16);
--container: 1180px;
--header-h: 92px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px); }
body{
margin:0;
font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
color:var(--body);
background:var(--bg) var(--doodles) repeat;
background-size:var(--doodles-size) auto;
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ color:var(--ink); line-height:1.2; margin:0 0 .5em; font-weight:600; }
p{ margin:0 0 1rem; }
img{ max-width:100%; display:block; }
a{ color:var(--teal-dark); text-decoration:none; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
/* ---------- Botones ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.85rem 1.6rem; border:2px solid transparent; border-radius:999px;
font:inherit; font-weight:600; font-size:.95rem; cursor:pointer;
transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
white-space:nowrap;
}
.btn--primary{ background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(16,165,181,.35); }
.btn--primary:hover{ background:var(--teal-dark); transform:translateY(-2px); box-shadow:0 12px 26px rgba(16,165,181,.45); }
.btn--ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.7); backdrop-filter:blur(4px); }
.btn--ghost:hover{ background:#fff; color:var(--green-deep); transform:translateY(-2px); }
.btn--sm{ padding:.55rem 1.1rem; font-size:.85rem; }
.btn--block{ width:100%; }
/* ---------- Topbar ---------- */
.topbar{ background:var(--green-deep); color:#CBE6E2; font-size:.82rem; }
.topbar__inner{ display:flex; align-items:center; gap:1.4rem; height:38px; }
.topbar__spacer{ flex:1; }
.topbar__link{ color:var(--teal-light); font-weight:600; }
.topbar__link:hover{ color:#fff; }
/* ---------- Header ---------- */
.header{
position:sticky; top:0; z-index:60;
background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
transition:box-shadow .25s ease;
}
.header.is-stuck{ box-shadow:0 6px 24px rgba(18,49,46,.10); }
.header__inner{ display:flex; align-items:center; gap:1.5rem; min-height:var(--header-h); }
.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; padding-block:6px; }
.brand__img{ height:68px; width:auto; object-fit:contain; transition:transform .25s ease; }
.brand:hover .brand__img{ transform:scale(1.04); }
.brand__fallback{ display:flex; align-items:center; gap:.55rem; }
/* sin esto, display:flex le gana al atributo hidden y el respaldo sale junto al logo */
.brand__fallback[hidden]{ display:none; }
.brand__text{ font-size:1.25rem; font-weight:600; color:var(--teal); line-height:1; }
.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav a{ color:var(--ink); font-weight:500; font-size:.95rem; position:relative; padding:.25rem 0; }
.nav a::after{
content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
background:var(--orange); transition:width .25s ease;
}
.nav a:hover::after{ width:100%; }
.nav a.is-active{ color:var(--teal-dark); }
.nav a.is-active::after{ width:100%; background:var(--teal); }
.nav__cta{
background:var(--orange); color:#fff !important; padding:.6rem 1.25rem !important;
border-radius:999px; box-shadow:0 6px 16px rgba(245,135,31,.3);
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--orange-dark); }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; }
.burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* ---------- Hero / Slider ---------- */
.hero{ position:relative; height:clamp(480px,82vh,780px); overflow:hidden; background:var(--green-deep); }
.hero__slides{ position:absolute; inset:0; }
.slide{
position:absolute; inset:0;
display:flex; align-items:center;
opacity:0; visibility:hidden;
transition:opacity .9s ease, visibility .9s ease;
}
.slide.is-active{ opacity:1; visibility:visible; }
.slide__bg{
position:absolute; inset:0; overflow:hidden;
/* respaldo visible si la foto faltara */
background:linear-gradient(135deg,var(--green-deep),var(--teal));
transform:scale(1.06);
transition:transform 7s ease-out;
}
.slide__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide.is-active .slide__bg{ transform:scale(1); }
.slide__bg::after{
content:''; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(18,49,46,.82) 0%, rgba(18,49,46,.55) 45%, rgba(18,49,46,.15) 100%);
}
.slide__content{ position:relative; color:#fff; max-width:var(--container); }
.slide__eyebrow{
display:inline-block; margin:0 0 .8rem; padding:.35rem 1rem;
background:var(--orange); border-radius:999px;
font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.slide__title{
color:#fff; font-size:clamp(2.6rem,6.5vw,4.6rem); font-weight:700;
margin:0 0 .4rem; text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.slide__text{ font-size:clamp(1rem,1.7vw,1.2rem); max-width:34rem; color:#E7F3F1; margin-bottom:1.8rem; }
.slide__actions{ display:flex; gap:.9rem; flex-wrap:wrap; }
/* animación de entrada del texto */
.slide.is-active .slide__eyebrow,
.slide.is-active .slide__title,
.slide.is-active .slide__text,
.slide.is-active .slide__actions{ animation:slideUp .8s both; }
.slide.is-active .slide__title{ animation-delay:.1s; }
.slide.is-active .slide__text{ animation-delay:.2s; }
.slide.is-active .slide__actions{ animation-delay:.3s; }
@keyframes slideUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.hero__arrow{
position:absolute; top:50%; translate:0 -50%; z-index:5;
width:50px; height:50px; border-radius:50%;
background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.5);
color:#fff; font-size:1.1rem; cursor:pointer; backdrop-filter:blur(6px);
transition:background .2s ease, transform .2s ease;
}
.hero__arrow:hover{ background:var(--teal); border-color:var(--teal); transform:translateY(-50%) scale(1.06); }
.hero__arrow--prev{ left:22px; }
.hero__arrow--next{ right:22px; }
/* bottom holgado: la tarjeta del buscador sube 46px y taparía los puntos */
.hero__dots{ position:absolute; bottom:76px; left:0; right:0; z-index:5; display:flex; justify-content:center; gap:.7rem; }
.hero__dots button{
width:38px; height:5px; border:0; border-radius:999px; padding:0; cursor:pointer;
background:rgba(255,255,255,.45); transition:background .25s ease, width .25s ease;
}
.hero__dots button.is-active{ background:var(--orange); width:56px; }
/* ---------- Buscador ---------- */
.searchbar{ position:relative; z-index:10; margin-top:-46px; }
.search{
display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:1rem;
background:#fff; border-radius:var(--radius); padding:1.2rem 1.4rem;
box-shadow:var(--shadow-lg); align-items:end;
}
.search__field{ display:flex; flex-direction:column; gap:.3rem; }
.search__field span{ font-size:.75rem; font-weight:600; color:var(--teal-dark); text-transform:uppercase; letter-spacing:.06em; }
.search__field select,
.search__field input{
font:inherit; font-size:.95rem; color:var(--ink);
padding:.6rem .7rem; border:1px solid var(--line); border-radius:var(--radius-sm);
background:var(--bg-alt); outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.search__field select:focus,
.search__field input:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(16,165,181,.15); }
.search__btn{ height:44px; }
/* ---------- Secciones ---------- */
.section{ padding:clamp(60px,8vw,100px) 0; }
.section--alt{ background:var(--bg-alt) var(--doodles) repeat; background-size:var(--doodles-size) auto; }
.eyebrow{
color:var(--orange); font-weight:600; font-size:.8rem;
letter-spacing:.12em; text-transform:uppercase; margin:0 0 .4rem;
}
.section__title{ font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:.4rem; }
.section__lead{ max-width:46rem; margin-bottom:2.6rem; }
.grid{ display:grid; gap:1.6rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
/* ---------- Destinos ---------- */
.dest{
position:relative; display:block; height:clamp(250px,25vw,310px); border-radius:var(--radius);
overflow:hidden; box-shadow:var(--shadow); background:var(--green-mid);
isolation:isolate;
}
.dest::before{
content:''; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(18,49,46,0) 35%, rgba(18,49,46,.85) 100%);
transition:background .3s ease;
}
.dest__img{
position:absolute; inset:0; z-index:0;
width:100%; height:100%; object-fit:cover;
transition:transform .6s ease;
}
.dest:hover .dest__img{ transform:scale(1.08); }
.dest:hover::before{ background:linear-gradient(180deg, rgba(16,165,181,.25) 0%, rgba(18,49,46,.9) 100%); }
.dest__body{ position:absolute; z-index:2; left:22px; right:22px; bottom:20px; color:#fff; }
.dest__body h3{ color:#fff; margin:0 0 .15rem; font-size:1.4rem; }
.dest__body p{ margin:0; font-size:.88rem; color:#CFE8E4; }
/* ---------- Cards de tours ---------- */
.card{
background:#fff; border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow); display:flex; flex-direction:column;
transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.card__img{
position:relative; height:210px; overflow:hidden;
background:linear-gradient(135deg,var(--green-mid),var(--teal));
}
.card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__badge{
position:absolute; z-index:2; top:14px; left:14px;
background:var(--teal); color:#fff; font-size:.72rem; font-weight:600;
padding:.3rem .8rem; border-radius:999px; letter-spacing:.03em;
}
.card__badge--orange{ background:var(--orange); }
.card__badge--pink{ background:var(--pink); }
.card__body{ padding:1.3rem 1.4rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.card__title{ font-size:1.2rem; margin-bottom:.35rem; }
.card__meta{ font-size:.82rem; color:var(--teal-dark); margin-bottom:.6rem; }
.card__text{ font-size:.92rem; flex:1; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.price{ font-size:1.35rem; font-weight:700; color:var(--ink); }
.price small{ display:block; font-size:.7rem; font-weight:500; color:var(--body); text-transform:uppercase; letter-spacing:.08em; }
/* ---------- Features ---------- */
.feature{ text-align:center; padding:1.6rem 1.2rem; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.feature__icon{
width:62px; height:62px; margin:0 auto .9rem; border-radius:50%;
display:grid; place-items:center; font-size:1.6rem;
}
.feature__icon--teal{ background:var(--teal-soft); }
.feature__icon--orange{ background:#FDEEDC; }
.feature__icon--pink{ background:#FCE4F0; }
.feature__icon--green{ background:#E4F0EC; }
.feature h3{ font-size:1.05rem; margin-bottom:.3rem; }
.feature p{ font-size:.88rem; margin:0; }
/* ---------- Stats ---------- */
.stats{
margin-top:2.6rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
background:linear-gradient(120deg,var(--teal) 0%, var(--green-mid) 100%);
border-radius:var(--radius); padding:2rem 1.4rem; color:#fff;
}
.stat{ text-align:center; }
.stat strong{ display:block; font-size:clamp(1.7rem,3.4vw,2.4rem); font-weight:700; line-height:1.1; }
.stat span{ font-size:.85rem; color:#DDF2F1; }
/* ---------- Testimonios ---------- */
.quote{
margin:0; background:#fff; border-radius:var(--radius); padding:1.6rem;
box-shadow:var(--shadow); border-top:4px solid var(--teal);
}
.quote p{ font-size:.95rem; font-style:italic; color:var(--ink); }
.quote footer{ display:flex; align-items:center; gap:.6rem; font-size:.85rem; font-weight:500; }
.avatar{
width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
background:var(--teal); color:#fff; font-size:.8rem; font-weight:600;
}
.avatar--orange{ background:var(--orange); }
.avatar--pink{ background:var(--pink); }
/* ---------- CTA / Contacto ---------- */
.cta{ background:var(--green-deep); color:#CFE4E0; padding:clamp(60px,8vw,96px) 0; }
.cta__inner{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.cta__text h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,2.6rem); }
.cta__list{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.6rem; }
.cta__list li{ position:relative; padding-left:1.8rem; font-size:.95rem; }
.cta__list li::before{
content:'✓'; position:absolute; left:0; top:0;
width:20px; height:20px; border-radius:50%;
background:var(--teal); color:#fff; font-size:.7rem;
display:grid; place-items:center;
}
.form{ background:#fff; border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-lg); }
.form label{ display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:1rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form input,.form select,.form textarea{
font:inherit; font-size:.95rem; font-weight:400; color:var(--ink);
padding:.7rem .8rem; border:1px solid var(--line); border-radius:var(--radius-sm);
background:var(--bg-alt); outline:none; resize:vertical;
transition:border-color .2s ease, box-shadow .2s ease;
}
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(16,165,181,.15); }
.form input.is-error{ border-color:var(--pink); box-shadow:0 0 0 3px rgba(238,78,155,.12); }
.form__msg{ margin:.9rem 0 0; font-size:.85rem; font-weight:600; text-align:center; min-height:1.2em; }
.form__msg.ok{ color:var(--teal-dark); }
.form__msg.err{ color:var(--pink); }
/* ---------- Footer ---------- */
.footer{ background:#12312E; color:#9FC0BB; padding:56px 0 0; font-size:.9rem; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem; padding-bottom:2.4rem; }
.footer__logo{
height:82px; width:auto; margin-bottom:1rem;
/* el logo es para fondo claro: un halo suave lo separa del footer oscuro */
filter:drop-shadow(0 0 10px rgba(255,255,255,.18));
}
.footer h4{ color:#fff; font-size:.95rem; margin-bottom:.8rem; }
.footer a{ display:block; color:#9FC0BB; padding:.2rem 0; }
.footer a:hover{ color:var(--orange); }
.footer p{ margin:0 0 .35rem; }
.footer__bottom{
display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
border-top:1px solid rgba(255,255,255,.1); padding-block:1.1rem; font-size:.82rem;
}
/* ---------- Asesora flotante (WhatsApp) ---------- */
.asesora{
position:fixed; right:20px; bottom:20px; z-index:80;
display:flex; align-items:center; gap:.6rem;
}
/* El globo aparece al pasar el mouse: si queda fijo tapa el botón "Buscar".
Para dejarlo siempre visible, borra las 2 reglas de opacity/transform. */
.asesora__bubble{
background:#fff; color:var(--ink);
font-size:.85rem; font-weight:600; line-height:1.2;
padding:.6rem .95rem; border-radius:999px;
box-shadow:0 8px 22px rgba(18,49,46,.18);
white-space:nowrap;
opacity:0; transform:translateX(10px); pointer-events:none;
transition:opacity .25s ease, transform .25s ease;
}
.asesora:hover .asesora__bubble,
.asesora:focus-visible .asesora__bubble{ opacity:1; transform:none; }
/* Tarjeta vertical con la figura completa de la asesora */
.asesora__photo{
position:relative; flex:none;
width:178px; border-radius:20px; /* <- cambia este valor para agrandarla o achicarla */
background:#fff; padding:4px;
box-shadow:0 16px 38px rgba(18,49,46,.34);
transition:transform .25s ease;
}
.asesora:hover .asesora__photo{ transform:translateY(-4px) scale(1.03); }
.asesora__photo img{
/* height:auto es obligatorio: el atributo height="600" del ![]()
actúa como
hint de CSS y, si no se anula, deja la tarjeta de 600px e ignora aspect-ratio */
width:100%; height:auto; aspect-ratio:4/5;
object-fit:cover; object-position:center top; border-radius:16px;
}
/* halo que late para llamar la atención */
.asesora__photo::before{
content:''; position:absolute; inset:0; border-radius:20px;
pointer-events:none;
box-shadow:0 0 0 0 rgba(37,211,102,.45);
animation:pulseWa 2.6s ease-out infinite;
}
@keyframes pulseWa{ to{ box-shadow:0 0 0 20px rgba(37,211,102,0); } }
.asesora__wa{
position:absolute; right:-8px; bottom:-8px;
width:44px; height:44px; border-radius:50%;
background:#25D366; color:#fff; border:3px solid #fff;
box-shadow:0 6px 16px rgba(37,211,102,.45);
display:grid; place-items:center;
}
.asesora__wa svg{ width:22px; height:22px; }
@media (max-width:860px){
.asesora{ right:14px; bottom:14px; }
.asesora__bubble{ display:none; }
.asesora__photo{ width:120px; border-radius:16px; }
.asesora__photo::before{ border-radius:16px; }
.asesora__photo img{ border-radius:12px; }
.asesora__wa{ width:36px; height:36px; right:-6px; bottom:-6px; }
.asesora__wa svg{ width:18px; height:18px; }
}
/* ---------- Reveal al hacer scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
/* ---------- Responsive ---------- */
@media (max-width:1000px){
.grid--4{ grid-template-columns:repeat(2,1fr); }
.footer__grid{ grid-template-columns:1fr 1fr; }
.search{ grid-template-columns:1fr 1fr; }
.search__btn{ grid-column:1 / -1; }
}
@media (max-width:860px){
.burger{ display:flex; }
.nav{
position:fixed; inset:0 0 0 auto; width:min(300px,82vw);
background:#fff; flex-direction:column; align-items:flex-start;
gap:.4rem; padding:calc(var(--header-h) + 24px) 26px 26px;
box-shadow:-10px 0 40px rgba(18,49,46,.18);
transform:translateX(100%); transition:transform .3s ease; z-index:55;
}
.nav.is-open{ transform:none; }
.nav a{ width:100%; padding:.7rem 0; border-bottom:1px solid var(--line); }
.nav__cta{ margin-top:.8rem; border-bottom:0 !important; text-align:center; }
.grid--3,.grid--4{ grid-template-columns:1fr; }
.stats{ grid-template-columns:repeat(2,1fr); row-gap:1.6rem; }
.cta__inner{ grid-template-columns:1fr; }
.form__row{ grid-template-columns:1fr; }
.hero__arrow{ display:none; }
.searchbar{ margin-top:-30px; }
.topbar__item--hide{ display:none; }
}
@media (max-width:560px){
.search{ grid-template-columns:1fr; }
.footer__grid{ grid-template-columns:1fr; }
:root{ --header-h:74px; }
.brand__img{ height:54px; }
.footer__logo{ height:70px; }
}
@media (prefers-reduced-motion:reduce){
/* iteration-count:1 evita que las animaciones infinitas (el anillo de la
asesora) se repitan cada .01ms y saturen el repintado */
*{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
html{ scroll-behavior:auto; }
.slide__bg{ transform:none; }
.asesora__photo::before{ animation:none; }
}
/* =========================================================
Paquetes — listado (paquetes.html) y detalle (/paquetes/*)
========================================================= */
/* ---------- Cabecera de la página de paquetes ---------- */
.phero{
background:linear-gradient(120deg,var(--green-deep) 0%, var(--teal-dark) 100%);
color:#CFE4E0; padding:clamp(48px,6vw,76px) 0;
}
.phero .eyebrow{ color:var(--teal-light); }
.phero__title{ color:#fff; font-size:clamp(2rem,4.4vw,3rem); margin-bottom:.4rem; }
.phero__lead{ max-width:44rem; margin:0; }
/* ---------- Grilla de tarjetas de paquete ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.pcard{
background:#fff; border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow); display:flex; flex-direction:column;
transition:transform .3s ease, box-shadow .3s ease;
}
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.pcard__link{ position:relative; display:block; background:var(--green-mid); }
.pcard__img{ width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; display:block; }
.pcard__tag{
position:absolute; top:12px; left:12px; z-index:2;
background:rgba(18,49,46,.78); color:#fff; backdrop-filter:blur(4px);
font-size:.72rem; font-weight:600; padding:.3rem .7rem; border-radius:999px;
}
.pcard__body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.pcard__title{ font-size:1.02rem; margin:0 0 .15rem; line-height:1.3; }
.pcard__title a{ color:var(--ink); }
.pcard__title a:hover{ color:var(--teal-dark); }
.pcard__zona{ font-size:.8rem; color:var(--teal-dark); margin:0 0 .8rem; }
.pcard__foot{
display:flex; align-items:center; justify-content:space-between; gap:.6rem;
margin-top:auto; padding-top:.8rem; border-top:1px solid var(--line);
}
.pcard__foot .price{ font-size:1.1rem; }
/* ---------- Migas de pan ---------- */
.crumbs{ background:var(--bg-alt); border-bottom:1px solid var(--line); font-size:.84rem; }
.crumbs .container{ padding-block:.8rem; }
.crumbs span{ color:var(--body); }
.crumbs a{ color:var(--teal-dark); font-weight:500; }
/* ---------- Cabecera del detalle ---------- */
.pkg{ background:var(--bg-alt) var(--doodles) repeat; background-size:var(--doodles-size) auto; padding:clamp(32px,5vw,56px) 0; }
.pkg__inner{ display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:start; }
.pkg__media{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--green-mid); }
.pkg__media img{ width:100%; height:auto; display:block; }
.pkg__title{ font-size:clamp(1.9rem,4vw,2.8rem); margin-bottom:.5rem; }
.pkg__lead{ font-size:1.05rem; max-width:38rem; }
.pkg__facts{ list-style:none; padding:0; margin:1.4rem 0; display:grid; gap:.6rem; max-width:32rem; }
.pkg__facts li{
display:flex; justify-content:space-between; gap:1rem;
padding:.6rem .9rem; background:#fff; border-radius:var(--radius-sm);
border:1px solid var(--line); font-size:.9rem;
}
.pkg__facts span{ color:var(--body); }
.pkg__facts strong{ color:var(--ink); text-align:right; }
.pkg__price{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.pkg__price-num{ font-size:2rem; font-weight:700; color:var(--teal-dark); }
.pkg__price-num small{ font-size:.78rem; font-weight:500; color:var(--body); text-transform:uppercase; letter-spacing:.08em; }
.pkg__price-note{ font-size:.84rem; color:var(--body); }
.pkg__actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.btn--outline{ background:transparent; color:var(--teal-dark); border-color:var(--teal); }
.btn--outline:hover{ background:var(--teal); color:#fff; transform:translateY(-2px); }
/* ---------- Cuerpo del detalle ---------- */
.pkg__cols{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(1.6rem,4vw,3rem); align-items:start; }
.pkg__text h2{ font-size:1.35rem; margin-top:2rem; }
.pkg__text h2:first-child{ margin-top:0; }
.pkg__text p{ max-width:44rem; }
.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; max-width:44rem; }
.ticks li{ position:relative; padding-left:1.9rem; font-size:.95rem; }
.ticks li::before{
content:'✓'; position:absolute; left:0; top:.15rem;
width:20px; height:20px; border-radius:50%;
background:var(--teal-soft); color:var(--teal-dark); font-size:.7rem; font-weight:700;
display:grid; place-items:center;
}
.notice{
background:var(--cream); border:1px solid #F0DCC2; border-left:4px solid var(--orange);
border-radius:var(--radius-sm); padding:1.1rem 1.3rem; max-width:44rem;
}
.notice p{ margin:0 0 .5rem; font-size:.93rem; }
.notice p:last-of-type{ margin-bottom:.9rem; }
.pkg__box{
position:sticky; top:calc(var(--header-h) + 16px);
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
padding:1.4rem; box-shadow:var(--shadow); text-align:center;
}
.pkg__box h3{ font-size:1.05rem; margin-bottom:.6rem; }
.pkg__box-price{ font-size:1.9rem; font-weight:700; color:var(--teal-dark); margin:0; line-height:1.1; }
.pkg__box-price small{ display:block; font-size:.72rem; font-weight:500; color:var(--body); text-transform:uppercase; letter-spacing:.08em; }
.pkg__box-note{ font-size:.8rem; margin:.3rem 0 1rem; }
.pkg__box-small{ font-size:.8rem; margin:.9rem 0 0; color:var(--body); }
/* ---------- Paquetes relacionados ---------- */
.relgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.rel{
display:flex; gap:.9rem; align-items:center;
background:#fff; border-radius:var(--radius); padding:.7rem;
box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease;
}
.rel:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.rel img{ width:64px; height:96px; object-fit:cover; border-radius:var(--radius-sm); flex:none; }
.rel__body{ display:flex; flex-direction:column; gap:.15rem; }
.rel__body strong{ color:var(--ink); font-size:.95rem; line-height:1.3; }
.rel__body small{ color:var(--teal-dark); font-weight:600; font-size:.82rem; }
/* ---------- Redes en el footer ---------- */
.footer__social{ display:flex; gap:.9rem; margin-top:.5rem; }
.footer__social a{ display:inline; }
/* ---------- Responsive ---------- */
@media (max-width:1100px){
.pgrid{ grid-template-columns:repeat(3,1fr); }
.pkg__cols{ grid-template-columns:1fr; }
.pkg__box{ position:static; }
}
@media (max-width:860px){
.pgrid{ grid-template-columns:repeat(2,1fr); }
.relgrid{ grid-template-columns:1fr; }
.pkg__inner{ grid-template-columns:1fr; }
.pkg__media{ max-width:360px; margin-inline:auto; }
}
@media (max-width:520px){
.pgrid{ grid-template-columns:1fr; gap:1.2rem; }
}
/* ---------- Paquetes destacados en la portada ---------- */
/* Los flyers son 9:16; sin acotar el ancho las 3 tarjetas quedan enormes */
.pgrid--home{ grid-template-columns:repeat(3,1fr); max-width:940px; margin-inline:auto; }
.section__more{ text-align:center; margin:2.2rem 0 0; }
@media (max-width:860px){
.pgrid--home{ grid-template-columns:repeat(2,1fr); max-width:600px; }
}
@media (max-width:520px){
.pgrid--home{ grid-template-columns:1fr; max-width:320px; }
}
/* =========================================================
Página Nosotros (nosotros.html)
Arte del flyer: bandas alternadas — blanca con letras rosadas
y rosada con letras blancas. Los doodles de viaje van de fondo
(assets/img/doodles-rosa.svg y doodles-blanco.svg).
Todo scoped a .page-nosotros para no afectar al resto del sitio.
========================================================= */
/* (--green-ink se define en :root para que sirva en todas las páginas) */
/* ---------- Bandas ---------- */
.fsec{ position:relative; padding:clamp(48px,7vw,84px) 0; }
.fsec--white{
background:#fff var(--doodles) repeat;
background-size:var(--doodles-size) auto;
color:var(--green-ink);
}
.fsec--pink{
background:var(--pink) url("../img/doodles-blanco.svg") repeat; /* versión blanca de la textura */
background-size:var(--doodles-size) auto;
color:#fff;
}
.fsec .container{ position:relative; z-index:1; }
.fsec--white h1,.fsec--white h2,.fsec--white h3,.fsec--white h4,.fsec--white strong,.fsec--white b{ color:var(--pink); }
.fsec--white p,.fsec--white li,.fsec--white small{ color:var(--green-ink); }
.fsec--white p strong,.fsec--white p b{ color:var(--green-ink); }
.fsec--pink h1,.fsec--pink h2,.fsec--pink h3,.fsec--pink h4,.fsec--pink strong,.fsec--pink b{ color:#fff; }
.fsec--pink p,.fsec--pink li,.fsec--pink small{ color:#fff; }
/* ---------- Título en píldora ---------- */
.fsec__head{ text-align:center; margin-bottom:clamp(1.8rem,4vw,2.6rem); }
.pill{
display:inline-block; margin:0; padding:.5rem 2.2rem;
border-radius:999px; line-height:1.3;
font-size:clamp(1.35rem,3.2vw,2.1rem); font-weight:700;
text-transform:uppercase; letter-spacing:.01em; color:#fff !important;
}
.pill--pink{ background:var(--pink); box-shadow:0 10px 26px rgba(238,78,155,.3); }
.pill--teal{ background:var(--teal); box-shadow:0 10px 26px rgba(16,165,181,.3); }
.fsec__lead{ max-width:44rem; margin:1rem auto 0; font-size:1.02rem; }
/* ---------- Quiénes somos ---------- */
.about__text{ max-width:58rem; margin-inline:auto; }
.about__text p:last-child{ margin-bottom:0; }
/* ---------- Nuestra CEO (banda rosada) ---------- */
.ceo__inner{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(1.8rem,4vw,3.4rem); align-items:center; }
.ceo__inner p{ font-size:1rem; }
.ceo__inner p:last-child{ margin-bottom:0; }
.ceo__photo{
position:relative; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden;
background:#fff; border:8px solid #fff; box-shadow:0 18px 40px rgba(140,20,80,.28);
}
.ceo__photo img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:2; }
/* Si aún no se subió la foto, el onerror quita el ![]()
y queda el monograma */
.ceo__photo::after{
content:attr(data-initials); position:absolute; inset:0; z-index:1;
display:grid; place-items:center; color:var(--pink); font-size:4.6rem; font-weight:600; letter-spacing:.04em;
}
.ceo__name{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.9rem; }
/* ---------- Más que un viaje ---------- */
.perks{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.perk{
background:#fff; border:2px solid #F9D3E5; border-top:5px solid var(--pink);
border-radius:var(--radius); padding:1.5rem;
box-shadow:0 10px 26px rgba(238,78,155,.12);
transition:transform .2s ease, box-shadow .2s ease;
}
.perk:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(238,78,155,.2); }
.perk h3{ font-size:1.08rem; margin-bottom:.35rem; }
.fsec--white .perk h3{ color:var(--green-ink); }
.perk p{ margin:0; font-size:.93rem; }
.perk__icon{ font-size:1.6rem; line-height:1; margin-bottom:.7rem; }
/* ---------- Referencias y redes (banda rosada) ---------- */
.socials{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.2rem; }
.social{
display:flex; align-items:center; gap:.8rem;
background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.55);
border-radius:var(--radius); padding:1rem 1.1rem; color:#fff;
transition:background .2s ease, transform .2s ease;
}
.social:hover{ background:#fff; transform:translateY(-3px); }
.social:hover b,
.social:hover small{ color:var(--pink); }
.social__icon{
flex:none; width:40px; height:40px; border-radius:50%;
display:grid; place-items:center; background:#fff; color:var(--pink);
}
.social__icon svg{ width:20px; height:20px; fill:currentColor; }
.social b{ display:block; font-size:.92rem; font-weight:600; line-height:1.25; }
.social small{ font-size:.78rem; opacity:.9; }
/* ---------- Responsive ---------- */
@media (max-width:1000px){
.socials{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
.ceo__inner{ grid-template-columns:1fr; justify-items:center; text-align:center; }
.ceo__photo{ max-width:240px; }
.perks{ grid-template-columns:1fr; }
}
@media (max-width:520px){
.socials{ grid-template-columns:1fr; }
.pill{ padding:.45rem 1.4rem; }
}
/* =========================================================
Maqueta tipo flyer para las páginas de paquete
(portada, precios, reserva, embarque, incluye, itinerario)
Reutiliza .fsec y .pill de la página Nosotros.
========================================================= */
/* ---------- Banda turquesa ---------- */
.fsec--teal{
background:var(--teal) url("../img/doodles-blanco.svg") repeat;
background-size:var(--doodles-size) auto;
color:#fff;
}
.fsec--teal h1,.fsec--teal h2,.fsec--teal h3,.fsec--teal h4,
.fsec--teal p,.fsec--teal li,.fsec--teal small,
.fsec--teal strong,.fsec--teal b{ color:#fff; }
.fsec--top{ padding-bottom:clamp(24px,3vw,36px); }
.fsec--bottom{ padding-top:clamp(24px,3vw,36px); }
.fsec__note{ text-align:center; max-width:44rem; margin:2rem auto 0; font-size:.92rem; }
.subhead{
text-align:center; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
font-size:clamp(1rem,2.4vw,1.25rem); margin:clamp(2rem,4vw,3rem) 0 1.6rem;
}
/* ---------- Portada del paquete ---------- */
.fhero{ background:linear-gradient(180deg,#0B5A8A 0%, #1178A8 55%, var(--teal) 100%); text-align:center; }
.fhero__pills{ display:grid; gap:.7rem; justify-items:center; padding:clamp(24px,4vw,44px) 0 clamp(18px,3vw,28px); }
.pill--lg{ font-size:clamp(1.7rem,5.4vw,3.1rem); padding:.35rem 2.4rem; letter-spacing:.02em; }
.fhero__strip{ margin:0;
background:var(--teal); color:#fff; text-align:center;
padding:.5rem 1rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
font-size:clamp(.95rem,2.4vw,1.4rem);
}
.fhero__media{ margin:0; background:#0B5A8A; }
.fhero__media img{ width:100%; height:clamp(280px,46vw,540px); object-fit:cover; }
/* ---------- Precios ---------- */
.prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:880px; margin:0 auto; }
.pricecard{
background:var(--pink); border-radius:20px; padding:1.1rem 1rem 1.2rem; text-align:center;
box-shadow:0 12px 28px rgba(140,20,80,.22);
}
.pricecard__num{ display:block; font-size:clamp(1.9rem,4.6vw,2.7rem); font-weight:700; line-height:1.1; color:#fff; }
.pricecard__num small{ font-size:.5em; font-weight:600; }
.pricecard__label{
display:inline-block; margin-top:.6rem; background:#fff; color:var(--pink) !important;
border-radius:999px; padding:.22rem .9rem; font-size:.78rem; font-weight:600;
}
/* ---------- Pasos de reserva ---------- */
.steps{ display:grid; gap:1.3rem; max-width:820px; margin:0 auto; }
.step{ display:flex; gap:1rem; align-items:flex-start; }
.step__num{
flex:none; width:34px; height:34px; border-radius:50%;
background:var(--orange); color:#fff !important; font-weight:700;
display:grid; place-items:center; font-size:.95rem;
}
.step p{ margin:0 0 .5rem; }
.step ul{ margin:.4rem 0 0; padding-left:1.2rem; }
.step li{ margin-bottom:.4rem; font-size:.95rem; }
/* ---------- Círculo de foto reutilizable ---------- */
.circ{ display:block;
position:relative; width:100%; max-width:150px; aspect-ratio:1; margin:0 auto;
border-radius:50%; overflow:hidden; border:5px solid #fff;
background:linear-gradient(160deg,var(--teal) 0%, var(--green-mid) 100%);
box-shadow:0 12px 26px rgba(18,49,46,.24);
}
.circ img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:2; }
/* Si la foto no existe, el onerror la quita y queda el icono de data-ico */
.circ::after{
content:attr(data-ico); position:absolute; inset:0; z-index:1;
display:grid; place-items:center; font-size:2.4rem;
}
/* ---------- Puntos de embarque ---------- */
.stops{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.stops--3{ grid-template-columns:repeat(3,1fr); max-width:720px; margin-inline:auto; }
.stop{ text-align:center; }
.stop__time{
display:inline-block; margin:.8rem 0 .5rem; padding:.26rem 1rem;
border-radius:999px; background:var(--teal); color:#fff !important;
font-weight:700; font-size:.95rem;
}
.fsec--teal .stop__time{ background:var(--pink); }
.stop h3{ font-size:.92rem; margin:0 0 .2rem; line-height:1.3; }
.stop p{ font-size:.8rem; margin:0; opacity:.92; }
/* ---------- Listas con guion (incluye / no incluye) ---------- */
.dashcols{ display:grid; grid-template-columns:1fr 1fr; gap:0 2.6rem; max-width:900px; margin:0 auto; }
.dashlist{ list-style:none; margin:0; padding:0; }
.dashlist li{ position:relative; padding-left:1.1rem; font-size:.95rem; margin-bottom:.45rem; }
.dashlist li::before{ content:'–'; position:absolute; left:0; top:0; font-weight:700; color:var(--pink); }
.fsec--teal .dashlist li::before{ color:#fff; }
/* ---------- Itinerario ---------- */
.itin{ display:grid; gap:1.8rem; max-width:960px; margin:0 auto; }
.itin__item{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:1.6rem; align-items:center; }
.itin__item--rev{ grid-template-columns:minmax(0,1fr) 150px; }
.itin__item--full{ grid-template-columns:1fr; }
.itin__item p{ margin:0; }
.itin__item p + p{ margin-top:.6rem; }
.itin__hour{ font-weight:700; }
.itin__end{ text-align:center; font-weight:700; margin-top:.4rem; }
/* ---------- Responsive ---------- */
@media (max-width:900px){
.prices{ grid-template-columns:1fr; max-width:340px; }
.stops{ grid-template-columns:repeat(2,1fr); }
.stops--3{ grid-template-columns:repeat(2,1fr); max-width:none; }
.dashcols{ grid-template-columns:1fr; }
.itin__item,
.itin__item--rev{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:1rem; }
.itin__item--rev .circ{ order:-1; }
}
@media (max-width:520px){
.stops,
.stops--3{ grid-template-columns:1fr; }
.circ{ max-width:130px; }
}
/* Los dos botones del bloque de reserva van centrados y separados */
.section__more .btn{ margin:.3rem; }