/* retiroyreciclaje.cl — hoja de estilos única. Sin estilos inline (lo exige la CSP). */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
}

:root {
  --tinta: #12263a;
  --tinta-2: #2b4258;
  --texto: #2d3a46;
  --suave: #5b6b7a;
  --ambar: #f6a609;
  --ambar-claro: #fff4dc;
  --verde: #157a43;
  --verde-osc: #106437;
  --verde-claro: #e8f6ee;
  --fondo: #f6f4ef;
  --blanco: #fff;
  --linea: #e3ded3;
  --radio: 14px;
  --radio-sm: 9px;
  --sombra: 0 1px 2px rgba(18, 38, 58, .06), 0 8px 24px rgba(18, 38, 58, .07);
  --ancho: 1160px;
  --fuente: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Las anclas del menú no quedan tapadas por la cabecera fija. */
section[id] { scroll-margin-top: 72px; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { color: var(--tinta); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--verde); text-underline-offset: .18em; }
a:hover { color: var(--verde-osc); }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; border-radius: 4px; }
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.contenedor-angosto { max-width: 820px; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--blanco); padding: .75rem 1rem; z-index: 100; }
.saltar:focus { left: 1rem; }

.icono { width: 1.25em; height: 1.25em; flex: none; }
.icono-sm { width: 1em; height: 1em; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .65em 1.2em;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primario { background: var(--ambar); color: var(--tinta); }
.btn-primario:hover { background: #e59a00; color: var(--tinta); }
.btn-linea { border-color: currentColor; color: var(--tinta); background: transparent; }
.btn-linea:hover { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.btn-wa { background: var(--verde); color: var(--blanco); }
.btn-wa:hover { background: var(--verde-osc); color: var(--blanco); }
.btn-sm { min-height: 40px; padding: .45em .95em; font-size: .95rem; }
.btn-grande { min-height: 52px; padding: .8em 1.5em; font-size: 1.05rem; }

/* Franja superior y cabecera */
.franja { background: var(--tinta); color: #dbe4ec; font-size: .875rem; }
.franja-fila { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; }
.franja span { display: inline-flex; align-items: center; gap: .4em; }
.franja .icono { color: var(--ambar); width: 1em; height: 1em; }
.franja-tel { display: inline-flex; align-items: center; gap: .4em; color: inherit; font-weight: 600; text-decoration: none; }
.franja-tel:hover { color: var(--ambar); }
.franja-zona { display: none !important; gap: 1.5rem !important; }

.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--linea); backdrop-filter: saturate(1.4) blur(8px); }
.cabecera-fila { display: flex; align-items: center; gap: .75rem; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--tinta); text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; margin-right: auto; }
.marca:hover { color: var(--tinta); }
.marca-logo { width: 38px; height: 38px; }
.marca span { white-space: nowrap; }
.marca-clara, .marca-clara:hover { color: var(--blanco); }

.nav { order: 3; }
.menu-boton {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 0 .8rem;
  background: none; border: 1px solid var(--linea); border-radius: var(--radio-sm);
  font: inherit; font-weight: 600; color: var(--tinta); cursor: pointer;
}
.menu-boton span { font-size: .95rem; }
@media (max-width: 419px) {
  .marca { font-size: 1.05rem; gap: .5rem; }
  /* En pantallas angostas el botón queda solo con ícono; el texto sigue disponible para lectores de pantalla. */
  .menu-boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.menu {
  display: none; list-style: none; margin: 0; padding: .75rem 1.25rem 1.25rem;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--blanco); border-bottom: 1px solid var(--linea); box-shadow: var(--sombra);
}
.menu.abierto { display: block; }
.menu a { display: block; padding: .7rem 0; color: var(--tinta); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--linea); }
.menu a:hover { color: var(--verde); }
.menu .menu-cta a { margin-top: 1rem; border: 0; color: var(--tinta); justify-content: center; display: flex; }
.cabecera-acciones { display: flex; gap: .5rem; }
.cabecera-acciones .btn-linea span { display: none; }
.solo-escritorio { display: none; }

@media (min-width: 640px) {
  .franja-zona { display: inline-flex !important; }
  .cabecera-acciones .btn-linea span { display: inline; }
}
@media (min-width: 1080px) {
  .nav { order: 0; }
  .menu-boton { display: none; }
  .menu { display: flex; position: static; padding: 0; gap: 1.4rem; background: none; border: 0; box-shadow: none; margin-right: 1rem; }
  .menu a { padding: .3rem 0; border: 0; font-size: .97rem; }
  .menu .menu-cta { display: none; }
  .solo-escritorio { display: inline-flex; }
}

/* Migas */
.migas { background: var(--fondo); font-size: .875rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0; padding: .6rem 0; }
.migas li { color: var(--suave); }
.migas li + li::before { content: '›'; margin-right: .5rem; color: #9aa7b3; }
.migas a { color: var(--tinta-2); }

/* Hero */
.hero { position: relative; background: var(--fondo); overflow: hidden; }
.hero::after {
  content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 166, 9, .18), rgba(246, 166, 9, 0) 70%); pointer-events: none;
}
.hero-grilla { display: grid; gap: 2rem; align-items: center; padding-block: 3rem 3.5rem; }
.hero-interior .contenedor { padding-block: 2.75rem 3rem; position: relative; z-index: 1; }
.hero-interior h1 { max-width: 22ch; }
.antetitulo { display: inline-flex; align-items: center; gap: .4em; margin-bottom: 1rem; padding: .3rem .8rem; border-radius: 999px; background: var(--blanco); border: 1px solid var(--linea); color: var(--tinta-2); font-size: .9rem; font-weight: 600; }
.antetitulo .icono { color: var(--verde); width: 1.05em; height: 1.05em; }
.hero h1 em { font-style: normal; color: var(--verde); }
.hero-bajada { font-size: 1.15rem; color: var(--tinta-2); max-width: 62ch; }
.hero-botones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.btn-hero-wa { min-height: 60px; padding: .85em 1.9em; font-size: 1.2rem; box-shadow: 0 8px 20px rgba(21, 122, 67, .28); }
@media (max-width: 479px) { .btn-hero-wa { width: 100%; } }
.hero-puntos { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 1.5rem 0 0; font-weight: 600; color: var(--tinta); font-size: .97rem; }
.hero-puntos li { display: inline-flex; align-items: center; gap: .4em; }
.hero-puntos .icono { color: var(--verde); }
.hero-arte { position: relative; z-index: 1; }
.hero-arte img { width: 100%; height: auto; }
/* Sello "5 años de experiencia": sobre la ilustración; en celular, en línea bajo los botones. */
.sello-experiencia { position: absolute; top: 2%; left: 2%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; margin: 0; border-radius: 50%; background: var(--tinta); color: var(--blanco); text-align: center; line-height: 1.1; box-shadow: 0 0 0 6px var(--fondo), 0 10px 24px rgba(18, 38, 58, .22); transform: rotate(-8deg); }
.sello-experiencia strong { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--ambar); }
.sello-experiencia span { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; max-width: 10ch; }
@media (min-width: 900px) {
  .hero-grilla { grid-template-columns: 1.1fr .9fr; padding-block: 4rem 4.5rem; }
}

/* Secciones */
.seccion { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.seccion-suave { background: var(--fondo); }
.seccion-oscura { background: var(--tinta); color: #d5dee7; }
.seccion-oscura h2, .seccion-oscura h3 { color: var(--blanco); }
.seccion-oscura a:not(.btn) { color: var(--ambar); }
.seccion-cabeza { max-width: 720px; margin-bottom: 2rem; }
.seccion-cabeza p { color: var(--suave); font-size: 1.1rem; }
.seccion-cabeza .etiqueta, .etiqueta { display: inline-block; margin-bottom: .75rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.subgrupo { margin: 2.5rem 0 1rem; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.subgrupo:first-of-type { margin-top: 0; }

/* Tarjetas */
.grilla-tarjetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grilla-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.tarjeta {
  display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  color: var(--texto); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tarjeta:hover { border-color: var(--ambar); box-shadow: var(--sombra); }
.tarjeta h3 { margin: .4rem 0 0; }
.tarjeta p { margin: 0; color: var(--suave); font-size: .98rem; }
.tarjeta-icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--ambar-claro); color: var(--tinta); }
.tarjeta-icono .icono { width: 28px; height: 28px; }
.tarjeta-mas { margin-top: auto; padding-top: .6rem; display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font-weight: 700; color: var(--verde); font-size: .95rem; text-decoration: none; }
.tarjeta-mas:hover { text-decoration: underline; }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: none; }
.pasos li { background: var(--blanco); border-radius: var(--radio); padding: 1.5rem; border: 1px solid var(--linea); }
.pasos p { margin: 0; color: var(--suave); }
.paso-num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .9rem; border-radius: 50%; background: var(--tinta); color: var(--ambar); font-weight: 800; font-size: 1.1rem; }

/* Bloques destacados */
.destacado { display: grid; gap: 2rem; align-items: center; }
.destacado-icono { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: rgba(246, 166, 9, .15); color: var(--ambar); }
.destacado-icono .icono { width: 38px; height: 38px; }
@media (min-width: 900px) { .destacado { grid-template-columns: auto 1fr auto; } }
@media (min-width: 900px) { .destacado-con-foto { grid-template-columns: 2fr 3fr; gap: 3rem; } }
.destacado-con-foto .btn { margin-top: .75rem; }

/* Fotografías */
.foto { margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--linea); }
.foto img { display: block; width: 100%; height: auto; }
.foto-nosotros { max-width: 460px; justify-self: center; }
.foto-cdf { box-shadow: none; }
@media (max-width: 899px) { .foto-cdf img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 70%; } }
@media (max-width: 899px) { .foto-nosotros img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 78%; } .foto-nosotros { max-width: none; } }

.ventajas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ventaja .icono { width: 30px; height: 30px; color: var(--verde); margin-bottom: .6rem; }
.ventaja h3 { font-size: 1.1rem; }
.ventaja p { color: var(--suave); margin: 0; }

.dos-columnas { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1.3fr 1fr; gap: 3rem; } }
.dos-columnas-centradas { align-items: center; }
.texto h2 { margin-top: 0; }
.texto h2:not(:first-child) { margin-top: 2rem; }
.caja { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; }
.seccion-suave .caja { border-color: transparent; }
.caja h3 { display: flex; align-items: center; gap: .45em; font-size: 1.05rem; }
.caja h3 .icono { color: var(--verde); }
.caja p:last-child { margin-bottom: 0; }

.lista-check { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.lista-check li { display: flex; gap: .55em; align-items: flex-start; }
.lista-check .icono { color: var(--verde); margin-top: .25em; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.chips a, .chips span {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: .5rem 1rem;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px;
  color: var(--tinta); font-weight: 600; text-decoration: none;
}
.chips a:hover, .chips a[aria-current] { border-color: var(--verde); color: var(--verde); }
.chips .icono { color: var(--verde); }

.enlaces-linea { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.mas { margin: 1.75rem 0 .5rem; font-weight: 700; color: var(--tinta); }
.enlace-flecha { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; }

/* FAQ */
.faq { border-bottom: 1px solid var(--linea); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--tinta); font-size: 1.07rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fondo); color: var(--tinta); font-size: 1.3rem; font-weight: 600; transition: transform .15s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 1.1rem; color: var(--texto); }

/* Agenda / formulario */
.seccion-agenda { background: var(--tinta); color: #d5dee7; }
.seccion-agenda h2 { color: var(--blanco); }
.seccion-agenda a:not(.btn) { color: var(--ambar); }
.seccion-agenda .lista-check .icono { color: var(--ambar); }
.agenda-grilla { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .agenda-grilla { grid-template-columns: .85fr 1.15fr; gap: 3.5rem; } }
.tarjeta-form { background: var(--blanco); color: var(--texto); border-radius: calc(var(--radio) + 4px); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.seccion-agenda .tarjeta-form a { color: var(--verde); }
.form-wa { display: grid; gap: 1rem; }
@media (min-width: 560px) { .form-wa { grid-template-columns: 1fr 1fr; } .campo-ancho { grid-column: 1 / -1; } }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 700; color: var(--tinta); font-size: .95rem; }
.opcional { font-weight: 400; color: var(--suave); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: .65rem .8rem;
  font: inherit; font-size: 1rem; color: var(--texto);
  background: var(--blanco); border: 1.5px solid #cfd6dc; border-radius: var(--radio-sm);
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(246, 166, 9, .45); }
.campo [aria-invalid="true"] { border-color: #b3261e; }
.form-error { margin: 0; padding: .7rem .9rem; border-radius: var(--radio-sm); background: #fdecea; color: #8c1d18; font-weight: 600; }
.form-nota { margin: 0; font-size: .87rem; color: var(--suave); }
.btn-wa .icono { width: 1.4em; height: 1.4em; }

/* Contenido largo (privacidad, nosotros) */
.prosa { max-width: 760px; }
.prosa h2 { font-size: 1.45rem; margin-top: 2.2rem; }
.prosa ul { padding-left: 1.2rem; }
.prosa li { margin-bottom: .4rem; }

.contacto-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.contacto-lista li { display: flex; gap: .9rem; align-items: flex-start; }
.contacto-lista .tarjeta-icono { width: 46px; height: 46px; }
.contacto-lista strong { display: block; color: var(--tinta); }

/* Pie */
.pie { background: #0c1b2a; color: #b8c5d1; font-size: .95rem; }
.pie-grilla { display: grid; gap: 2rem; padding-block: 3.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pie-marca p { margin-top: 1rem; max-width: 40ch; }
.pie-titulo { color: var(--blanco); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.pie a { color: #dbe4ec; text-decoration: none; }
.pie a:hover { color: var(--ambar); }
.pie-contacto li, .pie-contacto a { display: inline-flex; align-items: center; gap: .5em; }
.pie-contacto .icono { color: var(--ambar); width: 1.1em; height: 1.1em; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.25rem 5.5rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .87rem; }
.pie-legal p { margin: 0; }

/* WhatsApp flotante */
.wa-flotante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: #1f9d55; color: var(--blanco);
  box-shadow: 0 10px 24px rgba(21, 122, 67, .35);
  transition: transform .15s;
}
.wa-flotante:hover { transform: scale(1.06); color: var(--blanco); }
.wa-flotante .icono { width: 32px; height: 32px; }

/* 404 */
.centrado { text-align: center; }
.centrado .hero-botones { justify-content: center; }

/* Landing: bloques de contacto y nosotros */
.etiqueta-clara { color: var(--ambar); }
.seccion-agenda .contacto-lista { margin-top: 1.5rem; }
.seccion-agenda .contacto-lista strong { color: var(--blanco); }
.contacto-icono { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(246, 166, 9, .15); color: var(--ambar); }
.ventajas-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.texto .ventajas { margin-top: 2rem; }

/* En móvil la ilustración es decorativa: se oculta para llegar antes al contenido. */
@media (max-width: 599px) {
  .hero-arte img { display: none; }
  .sello-experiencia { position: static; flex-direction: row; gap: .6rem; width: auto; height: auto; padding: .55rem 1.1rem; border-radius: 999px; transform: none; box-shadow: var(--sombra); justify-content: flex-start; }
  .sello-experiencia strong { font-size: 1.9rem; }
  .sello-experiencia span { max-width: none; font-size: .85rem; }
  .hero-arte { justify-self: start; }
}