/*
 * Ericka.o.nails · guías (/guias/)
 * Usa los tokens y componentes de estilos.css y servicio.css (nav, menú, botones, migas, preguntas, cierre, barra móvil).
 * Las fuentes son las de toda la web (fuentes.css): Manrope en todo, títulos en 800 y apretados como las landings,
 * y Great Vibes solo como firma.
 */

/* ---------- Portada ---------- */
.gu-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 118px 0 clamp(52px, 7vw, 96px);
  background:
    radial-gradient(ellipse 70% 60% at 85% 18%, rgba(220, 181, 106, .24), transparent 70%),
    radial-gradient(ellipse 60% 70% at 5% 100%, rgba(226, 174, 159, .14), transparent 70%),
    var(--noche);
}
.gu-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.gu-hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.gu-titulo { margin: 0; font-size: clamp(2.3rem, 4.6vw, 3.9rem); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; color: #fff; text-shadow: 0 2px 24px rgba(14, 10, 9, .45); }
.gu-hero__bajada { margin: 0; max-width: 56ch; font-size: clamp(1.03rem, 1.4vw, 1.16rem); color: rgba(255, 255, 255, .8); }
.gu-hero__bajada a { color: var(--oro-1); text-decoration: underline; text-decoration-color: rgba(247, 230, 184, .5); text-underline-offset: 3px; }
.gu-firma { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.gu-firma img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--noche), 0 0 0 3.5px var(--oro-2); }
.gu-firma p { margin: 0; display: flex; flex-direction: column; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .62); }
.gu-firma p span:first-child { color: rgba(255, 255, 255, .92); font-weight: 700; }
.gu-firma a { text-decoration: underline; text-decoration-color: var(--oro-2); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.gu-hero__foto {
  margin: 0; border-radius: 2.2rem; overflow: hidden; aspect-ratio: 4 / 5; rotate: 2deg;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .07), 0 0 0 9px rgba(255, 255, 255, .08), 0 70px 120px -40px rgba(0, 0, 0, .9);
}
.gu-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.gu-hero__saltos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gu-hero__saltos a {
  display: inline-flex; padding: 8px 15px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: background-color .3s;
}
.gu-hero__saltos a:hover { background: rgba(255, 255, 255, .18); }

/* ---------- Cuerpo: índice al costado y el artículo ---------- */
.gu-cuerpo {
  display: grid; grid-template-columns: 260px minmax(0, 720px); justify-content: center; gap: clamp(40px, 6vw, 96px);
  padding: clamp(44px, 6vw, 80px) 0 clamp(80px, 10vw, 130px);
}
.gu-lateral { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.gu-indice details { border-radius: 1.4rem; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.gu-indice summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 15px 18px; font-weight: 800; cursor: pointer; }
.gu-indice summary::-webkit-details-marker { display: none; }
.gu-indice summary i:first-child { font-size: 1.2rem; color: var(--oro-3); }
.gu-indice__flecha { margin-left: auto; transition: transform .4s var(--ease); }
.gu-indice details[open] .gu-indice__flecha { transform: rotate(180deg); }
.gu-indice ol { list-style: none; margin: 0; padding: 0 8px 12px; counter-reset: idx; display: flex; flex-direction: column; gap: 2px; }
.gu-indice li { counter-increment: idx; }
.gu-indice a { display: flex; gap: 10px; padding: 8px 10px; border-radius: .9rem; font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--tinta-2); transition: background-color .3s, color .3s; }
.gu-indice a::before { content: counter(idx, decimal-leading-zero); flex: none; padding-top: 1px; font-size: .78rem; font-weight: 800; color: var(--oro-3); font-variant-numeric: tabular-nums; }
.gu-indice a:hover { background: rgba(34, 24, 20, .05); color: var(--tinta); }
.gu-indice a.is-activo { background: rgba(220, 181, 106, .17); color: var(--tinta); }
.gu-lateral__cta {
  display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 1.4rem; color: #f4ebe4;
  background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(242, 178, 74, .22), transparent 70%), var(--noche);
}
.gu-lateral__precio { margin: 0; display: flex; flex-direction: column; }
.gu-lateral__precio > span { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-1); }
.gu-lateral__precio b { font-size: 2.2rem; font-weight: 800; letter-spacing: -.05em; line-height: 1.15; }
.gu-lateral__precio .gu-lateral__chico { font-size: 1.45rem; letter-spacing: -.03em; }
.gu-lateral__cta .btn { justify-content: space-between; }
.gu-lateral__wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 4px; font-weight: 700; font-size: .92rem; color: rgba(244, 235, 228, .8); transition: color .3s; }
.gu-lateral__wa:hover { color: #fff; }
.gu-lateral__wa i { font-size: 1.2rem; }

/* ---------- Artículo ---------- */
.gu-articulo { min-width: 0; font-size: 1.075rem; line-height: 1.75; }
.gu-seccion > p, .gu-resumen > p { margin: 0 0 1.05em; }
.gu-seccion > p:last-child { margin-bottom: 0; }
.gu-articulo strong { font-weight: 800; }
.gu-seccion > p a, .gu-lista a, .gu-pasos a, .gu-nota a, .gu-tabla td a, .gu-cta > p a, .gu-autora a, .pregunta__resp a, .gu-resumen a {
  color: var(--oro-osc); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(185, 138, 64, .55);
}
.gu-seccion { scroll-margin-top: 96px; padding-top: clamp(40px, 5vw, 60px); }
.gu-seccion h2 { margin: 0 0 .6em; font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }

.gu-resumen { position: relative; padding: clamp(22px, 3vw, 32px); border-radius: 1.8rem; background: var(--blanco); box-shadow: inset 0 0 0 1px rgba(185, 138, 64, .3), var(--sombra); }
.gu-resumen__et { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-osc); }
.gu-resumen .gu-resumen__et { margin-bottom: 8px; }
.gu-resumen__et i { font-size: 1rem; }
.gu-resumen > p:last-child { margin: 0; font-size: 1.12rem; font-weight: 500; line-height: 1.7; }

.gu-lista { list-style: none; margin: 0 0 1.3em; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gu-lista li { position: relative; padding-left: 28px; }
.gu-lista li::before { content: ''; position: absolute; left: 4px; top: .66em; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 3px rgba(220, 181, 106, .2); }
.gu-pasos { list-style: none; margin: 0 0 1.3em; padding: 0; counter-reset: paso; display: flex; flex-direction: column; gap: 12px; }
.gu-pasos li {
  counter-increment: paso; position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 18px 20px 18px 70px; border-radius: 1.4rem; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea);
}
.gu-pasos li::before {
  content: counter(paso); position: absolute; left: 18px; top: 17px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: .95rem; font-weight: 800; color: var(--oro-1); background: var(--tinta);
}
.gu-pasos b { font-size: 1.05rem; line-height: 1.4; letter-spacing: -.01em; }
.gu-pasos span { color: var(--tinta-2); line-height: 1.65; }

.gu-foto { margin: 1.7em auto; max-width: 440px; }
.gu-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.8rem; box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), 0 0 0 7px var(--linea), var(--sombra); }
.gu-foto figcaption, .gu-reel figcaption { margin-top: 12px; padding: 0 6px; font-size: .88rem; font-weight: 600; line-height: 1.45; color: var(--tinta-2); }
.gu-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.7em 0; }
.gu-fotos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gu-fotos .gu-foto { margin: 0; max-width: none; }
.gu-fotos .gu-foto img { border-radius: 1.4rem; }

.gu-nota { margin: 1.7em 0; padding: 20px 22px; border-radius: 1.4rem; background: var(--perla-2); box-shadow: inset 0 0 0 1px var(--linea); }
.gu-nota--ojo { background: #f6e4dd; box-shadow: inset 0 0 0 1px rgba(163, 82, 60, .2); }
.gu-nota__titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.gu-nota__titulo i { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; color: #2a1d10; background: var(--oro); }
.gu-nota--ojo .gu-nota__titulo i { color: #fff; background: #a3523c; }
.gu-nota__titulo span { display: flex; flex-direction: column; font-size: .72rem; font-weight: 800; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; color: var(--tinta-2); }
.gu-nota__titulo b { font-size: 1.04rem; letter-spacing: -.01em; text-transform: none; color: var(--tinta); }
.gu-nota > p:last-child { margin: 0; font-size: 1rem; line-height: 1.65; }

.gu-cita { margin: 1.8em 0; padding: 2px 0 2px 26px; border-left: 3px solid var(--oro-2); }
.gu-cita p { margin: 0 0 4px; font-size: clamp(1.15rem, 1.8vw, 1.3rem); font-style: italic; font-weight: 600; line-height: 1.5; }
.gu-cita footer { font-family: 'Great Vibes', cursive; font-size: 1.7rem; line-height: 1.2; color: var(--oro-3); }

.gu-tabla { margin: 1.4em 0 1.7em; overflow-x: auto; border-radius: 1.6rem; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra); overscroll-behavior-x: contain; }
.gu-tabla table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; }
.gu-tabla--compara table { min-width: 660px; }
.gu-tabla--2 table { min-width: 0; }
.gu-tabla--2 tbody th { position: static; width: 42%; }
.gu-tabla th, .gu-tabla td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); font-size: .93rem; line-height: 1.45; }
.gu-tabla tbody tr:last-child > * { border-bottom: 0; }
.gu-tabla thead th { padding-top: 18px; font-size: .98rem; font-weight: 800; letter-spacing: -.01em; }
.gu-tabla thead a { text-decoration: underline; text-decoration-color: var(--oro-2); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gu-tabla tbody th, .gu-tabla thead td, .gu-tabla thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--blanco); }
.gu-tabla tbody th { font-weight: 800; }
.gu-tabla--compara tbody th { font-size: .8rem; letter-spacing: .02em; color: var(--tinta-2); white-space: nowrap; }
.gu-tabla td { font-weight: 600; }
.gu-tabla td small { font-weight: 600; color: var(--tinta-2); }

.gu-precio {
  margin: 1.4em 0 1.7em; padding: clamp(24px, 3.5vw, 36px); border-radius: 2rem; color: #f4ebe4;
  background: radial-gradient(ellipse 70% 60% at 10% 0%, rgba(242, 178, 74, .22), transparent 70%), var(--noche);
  box-shadow: 0 50px 100px -50px rgba(60, 35, 25, .9);
}
.gu-precio p { margin: 0; }
.gu-precio__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.gu-precio__et { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-1); }
.gu-precio__dur { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: rgba(244, 235, 228, .7); }
.gu-precio__montos { display: flex; flex-wrap: wrap; gap: 10px 44px; margin: 16px 0 14px; }
.gu-precio__montos > div { display: flex; flex-direction: column; }
.gu-precio__monto {
  font-size: clamp(2.8rem, 6vw, 3.9rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; padding-right: .05em;
  background: var(--oro); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gu-precio__montos > div > span { margin-top: 6px; font-size: .92rem; font-weight: 700; color: rgba(244, 235, 228, .72); }
.gu-precio__desc { margin-bottom: 20px !important; font-size: .98rem; line-height: 1.6; color: rgba(244, 235, 228, .82); }
.gu-precio__desc a { color: var(--oro-1); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(247, 230, 184, .45); text-underline-offset: 3px; }
.gu-precio__ctas, .gu-cta__botones { display: flex; flex-wrap: wrap; gap: 10px; }

.gu-cta { margin: 1.8em 0; padding: clamp(24px, 3.5vw, 34px); border-radius: 2rem; background: linear-gradient(135deg, var(--blanco), #f3e5da); box-shadow: inset 0 0 0 1px rgba(185, 138, 64, .3), var(--sombra); }
.gu-cta__titulo { margin: 0 0 6px; font-size: clamp(1.35rem, 2.2vw, 1.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.gu-cta > p:not(.gu-cta__titulo) { margin: 0 0 18px; color: var(--tinta-2); }

.gu-reel { width: min(300px, 72%); margin: 1.8em auto; }
.gu-reel figcaption { margin-top: 0; }

.gu-preguntas .acordeon { margin-top: 6px; }
.gu-preguntas .pregunta summary { padding: 18px 20px; font-size: 1.02rem; }
.gu-preguntas .pregunta__resp { padding: 0 20px 20px; font-size: 1rem; }

.gu-autora {
  margin-top: clamp(52px, 6vw, 76px); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; align-items: center;
  padding: 24px; border-radius: 2rem; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra);
}
.gu-autora img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1.4rem; rotate: -2deg; box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--linea); }
.gu-autora p { margin: 0 0 10px; font-size: .98rem; line-height: 1.65; color: var(--tinta-2); }
.gu-autora p:last-child { margin: 0; }
.gu-autora .gu-autora__hola { margin-bottom: 6px; font-size: 2.3rem; line-height: 1; color: var(--oro-3); }

/* ---------- Tarjetas de guías (relacionadas e índice) ---------- */
.gu-relacionadas { padding: 0 0 clamp(90px, 11vw, 150px); }
.gu-relacionadas__cabeza, .gu-grupo__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.gu-h2 { margin: 0; font-size: clamp(2.1rem, 4.4vw, 3.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.gu-grupo { padding: clamp(64px, 8vw, 110px) 0 0; }
.gu-grupo:last-of-type { padding-bottom: clamp(90px, 11vw, 150px); }
.gu-grupo__cabeza p { margin: 0; max-width: 42ch; color: var(--tinta-2); }
.gu-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 3.5vw, 40px); }
.gu-tarjeta {
  display: flex; flex-direction: column; border-radius: 1.8rem; overflow: hidden; background: var(--blanco);
  box-shadow: inset 0 0 0 1px var(--linea), 0 24px 50px -38px rgba(122, 75, 56, .55);
  transition: transform .6s var(--ease), box-shadow .6s;
}
.gu-tarjeta:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra); }
.gu-tarjeta__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.gu-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gu-tarjeta:hover .gu-tarjeta__foto img { transform: scale(1.05); }
.gu-tarjeta__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.gu-tarjeta__meta { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-osc); }
.gu-tarjeta__titulo { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.gu-tarjeta__desc { font-size: .93rem; line-height: 1.55; color: var(--tinta-2); }
.gu-tarjeta__ir { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 800; }
.gu-tarjeta__ir i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #2a1d10; background: var(--oro); transition: transform .5s var(--ease); }
.gu-tarjeta:hover .gu-tarjeta__ir i { transform: translate(2px, -2px); }

/* ---------- Tablet y celular ---------- */
@media (max-width: 1080px) {
  .gu-cuerpo { grid-template-columns: minmax(0, 720px); gap: 0; padding-top: 28px; }
  .gu-lateral { position: static; margin-bottom: 16px; }
  .gu-lateral__cta { display: none; }
  .gu-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .gu-hero { padding-top: 96px; }
  .gu-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .gu-titulo { font-size: clamp(2rem, 9vw, 2.7rem); }
  .gu-hero__foto { aspect-ratio: 5 / 4; rotate: 0deg; border-radius: 1.8rem; }
  .gu-articulo { font-size: 1.04rem; }
  .gu-seccion h2 { font-size: clamp(1.55rem, 6.6vw, 1.9rem); }
  .gu-pasos li { padding: 16px 16px 16px 60px; }
  .gu-pasos li::before { left: 14px; top: 15px; width: 32px; height: 32px; }
  .gu-foto { max-width: 340px; }
  .gu-fotos { gap: 10px; }
  .gu-fotos--3 { gap: 8px; }
  .gu-fotos .gu-foto img { border-radius: 1.1rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, .6), 0 0 0 5px var(--linea), var(--sombra); }
  .gu-fotos figcaption { margin-top: 8px; padding: 0 2px; font-size: .78rem; }
  .gu-precio__ctas .btn, .gu-cta__botones .btn { flex: 1 1 auto; justify-content: space-between; }
  .gu-precio__ctas .btn--vidrio, .gu-cta__botones .btn--fantasma { justify-content: center; }
  .gu-autora { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px; }
  .gu-autora img { width: 130px; }
  .gu-tarjetas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gu-tarjeta { flex-direction: row; border-radius: 1.5rem; }
  .gu-tarjeta__foto { flex: 0 0 34%; aspect-ratio: auto; }
  .gu-tarjeta__cuerpo { padding: 16px; gap: 6px; }
  .gu-tarjeta__titulo { font-size: 1.05rem; }
  .gu-tarjeta__desc { display: none; }
  .gu-tarjeta__ir { padding-top: 4px; font-size: .86rem; }
  .gu-tarjeta__ir i { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .gu-tarjeta, .gu-tarjeta__foto img { transition: none; }
}