/* =========================================================
   Soy Dama Tiendas Online: estilos
   Los colores, las tipografías y las medidas están en :root.
   Si cambiás uno ahí, cambia en toda la web.
   ========================================================= */

:root {
  /* Paleta (file_to_use/paleta-de-colores.pdf) */
  --bordo: #8E1917;
  --lavanda: #B6A8FF;
  --crema: #FFFCEB;
  --negro: #000000;
  /* Lavanda transparente para las secciones que alternan: deja ver la luz del cursor.
     Sobre este fondo, el bordó se sigue leyendo bien (más de 7 a 1). */
  --lavanda-velo: color-mix(in srgb, var(--lavanda) 28%, transparent);

  /* Tipografías */
  --fuente-titulos: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  --fuente-textos: "Geom", "Century Gothic", Arial, sans-serif;

  /* Medidas */
  --ancho-max: 76rem;
  --margen: 1.5rem;         /* aire a los costados en el celular */
  --alto-encabezado: 4.5rem;
  --redondeo: 1.5rem;       /* puntas redondeadas de las fotos */

  /* Movimiento: cómo arrancan y frenan las animaciones */
  --curva: cubic-bezier(.2, .7, .2, 1);       /* sale rápido y frena suave */
  --curva-fuerte: cubic-bezier(.16, 1, .3, 1); /* para el título de la portada */

  /* El asterisco del kit, para usarlo como viñeta (se pinta con background) */
  --asterisco-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10v80M10 50h80M22 22l56 56M78 22 22 78' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round'/%3E%3C/svg%3E");

  color-scheme: light;
}

@media (min-width: 600px) {
  :root { --margen: 2rem; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--negro);
  font-family: var(--fuente-textos);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* En el celular y la tablet la web es más chica y más liviana (pedido de Dama del 14/10/2026).
   En compu, desde 960 px, todo queda como lo aprobó el 12/10/2026 */
@media (min-width: 960px) {
  body { font-size: 1.0625rem; }
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

/* Los títulos reparten las palabras entre sus líneas y los párrafos evitan dejar una palabra sola al final */
h1, h2, h3, summary, .pregunta, .frase-destacada, .seccion__cierre { text-wrap: balance; }
p { text-wrap: pretty; }

/* Texto seleccionado en lavanda (negro sobre lavanda se lee bien: 10 a 1) */
::selection {
  background: var(--lavanda);
  color: var(--negro);
}

:focus-visible {
  outline: 3px solid var(--negro);
  outline-offset: 3px;
}

[id] { scroll-margin-top: var(--alto-encabezado); }

.contenedor {
  width: min(100% - 2 * var(--margen), var(--ancho-max));
  margin-inline: auto;
}

/* Texto que leen los lectores de pantalla pero no se ve */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Link para saltar el menú con el teclado: aparece solo al usar Tab */
.saltar {
  position: absolute;
  top: -100%;
  left: var(--margen);
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--negro);
  color: var(--crema);
  border-radius: .5rem;
}
.saltar:focus { top: .75rem; }

/* Los dibujos guardados no ocupan lugar */
.dibujos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.asterisco {
  flex: none;
  width: 1em;
  height: 1em;
  color: var(--lavanda);
}

/* ---------- Luz lavanda que sigue al cursor ---------- */
/* La crea js/main.js, solo en compu con mouse. Va por detrás de todo:
   se ve sobre el fondo crema y nunca tapa textos, botones ni fotos. */
.luz {
  position: fixed;
  top: -20rem;   /* la mitad del tamaño: así el centro queda en la punta del cursor */
  left: -20rem;
  z-index: -1;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--lavanda) 55%, transparent),
    color-mix(in srgb, var(--lavanda) 25%, transparent) 40%,
    color-mix(in srgb, var(--lavanda) 8%, transparent) 70%,
    transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
  will-change: transform;
}
.luz--prendida { opacity: 1; }

/* ---------- Botones ---------- */

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .75rem 1.4rem;
  border: 1.5px solid var(--bordo);
  border-radius: 999px;
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--curva), box-shadow .25s;
}

/* En compu, más grandes y más negritas. Va antes de .boton--chico, así ese sigue siendo más chico */
@media (min-width: 960px) {
  .boton {
    min-height: 3.25rem;
    padding: .85rem 1.6rem;
    border-width: 2px;
    font-size: 1.0625rem;
    font-weight: 700;
  }
}

.boton--principal {
  background: var(--bordo);
  color: var(--crema);
}

.boton--secundario {
  background: transparent;
  color: var(--bordo);
}

/* Para fondos bordó, como la placa de contacto */
.boton--claro {
  background: var(--crema);
  border-color: var(--crema);
  color: var(--bordo);
}

/* Al pasar el mouse cambian de color. Solo en compu: en el celular el color quedaba pegado después de tocar */
@media (hover: hover) and (pointer: fine) {
  .boton--principal:hover {
    background: var(--negro);
    border-color: var(--negro);
    box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6);
  }
  .boton--secundario:hover,
  .boton--claro:hover {
    background: var(--lavanda);
    border-color: var(--lavanda);
    color: var(--negro);
  }
}

.boton--chico {
  min-height: 2.75rem;
  padding: .55rem 1.25rem;
  font-size: 1rem;
}

.boton .icono {
  width: 1.3em;
  height: 1.3em;
}

/* En compu suben apenas al pasar el mouse; al tocarlos o hacer clic se "hunden" un poquito */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .boton:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .boton:active { transform: scale(.97); }
}

/* En el celular, los botones ocupan todo el ancho */
@media (max-width: 599px) {
  .botones .boton { width: 100%; }
}

/* ---------- Encabezado ---------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--crema);
  transition: box-shadow .2s, background-color .3s;
}
.encabezado--con-sombra {
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 10px 24px -18px rgba(0, 0, 0, .35);
}

/* Encabezado de vidrio: al bajar se vuelve apenas transparente y esmerilado, y deja ver la luz lavanda.
   Con el menú del celular abierto vuelve a ser crema liso, para que se lea bien. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .encabezado--con-sombra {
    background: color-mix(in srgb, var(--crema) 80%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  .menu-abierto .encabezado { background: var(--crema); }
}

.encabezado__fila {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--alto-encabezado);
}

.logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.logo__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--bordo);
}
.logo__bajada {
  margin-top: .3rem;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}

/* Menú: sin JavaScript se ve siempre; con JavaScript, en el celular se abre con las tres rayitas */
.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 2rem;
}
.menu__lista {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.75rem;
}
.menu__lista a {
  display: inline-block;
  padding: .5rem 0;
  font-weight: 500;
  text-decoration: none;
  /* Subrayado que crece de izquierda a derecha al pasar el mouse */
  background: linear-gradient(currentColor, currentColor) left 0 bottom .3rem / 0 2px no-repeat;
  transition: background-size .3s var(--curva), color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .menu__lista a:hover {
    color: var(--bordo);
    background-size: 100% 2px;
  }
}

.menu-boton { display: none; }

@media (max-width: 899px) {
  /* Sin JavaScript el menú queda a la vista, así que el encabezado no se queda fijo arriba */
  .sin-js .encabezado { position: static; }
  .sin-js .encabezado__fila {
    flex-wrap: wrap;
    padding-block: .75rem;
  }

  .con-js .menu-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-right: -.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--negro);
    cursor: pointer;
  }

  .con-js .menu {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--margen));
    right: calc(-1 * var(--margen));
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: .5rem var(--margen) 1.5rem;
    background: var(--crema);
    border-top: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 18px 24px -18px rgba(0, 0, 0, .35);
    /* Cerrado: invisible y fuera del recorrido con Tab. Al abrirse baja suave */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.75rem);
    transition: opacity .25s ease, transform .3s var(--curva), visibility 0s linear .3s;
  }
  .con-js .menu-abierto .menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .25s ease, transform .3s var(--curva), visibility 0s;
  }

  .con-js .menu__lista {
    flex-direction: column;
    gap: 0;
  }
  /* Letra de los textos, fina y sin mayúsculas: más delicado que el logo, que manda */
  .con-js .menu__lista a {
    display: block;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    background: none;
    font-size: 1.125rem;
    font-weight: 400;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .con-js .menu,
  .con-js .menu-abierto .menu {
    transform: none;
    transition: none;
  }
}

/* Las tres rayitas, que se vuelven una cruz al abrir el menú */
.menu-boton__rayas,
.menu-boton__rayas::before,
.menu-boton__rayas::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s, background-color .2s;
}
.menu-boton__rayas { position: relative; }
.menu-boton__rayas::before,
.menu-boton__rayas::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-boton__rayas::before { top: -7px; }
.menu-boton__rayas::after { top: 7px; }
.menu-abierto .menu-boton__rayas { background: transparent; }
.menu-abierto .menu-boton__rayas::before { transform: translateY(7px) rotate(45deg); }
.menu-abierto .menu-boton__rayas::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Portada ---------- */

.portada {
  padding-block: 1.25rem 3rem;
  overflow: hidden;
}

.portada__grilla {
  display: grid;
  gap: 2.75rem;
}

/* El tamaño del título se calcula según el ancho de esta columna */
.portada__texto { container-type: inline-size; }

.portada__servicios {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.portada__servicios li {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.portada__servicios .asterisco { font-size: .9rem; }

.portada__titulo {
  margin-top: 1.5rem;
  font-family: var(--fuente-titulos);
  line-height: .9;
}
.portada__saludo {
  display: block;
  font-size: clamp(1.875rem, 8.5vw, 3rem);
  font-size: clamp(1.875rem, 10cqi, 3rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.02em;
}
.portada__nombre {
  display: block;
  margin-top: .08em;
  font-size: clamp(2.5rem, 12vw, 4.25rem);
  font-size: clamp(2.5rem, 14cqi, 4.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--bordo);
}

/* Cada línea del título va en su propio envoltorio, para que pueda subir desde abajo (ver "Movimiento") */
.portada__linea { display: block; }

.portada__bajada {
  max-width: 30ch;
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.5;
}

.portada .botones { margin-top: 1.75rem; }

.portada__foto {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}

/* La foto va entera, con las puntas redondeadas */
.portada__foto img {
  width: 100%;
  border-radius: var(--redondeo);
}

@media (min-width: 960px) {
  .portada { padding-block: 3rem 5.5rem; }

  /* En compu, el título grande y bien negrito */
  .portada__servicios { font-weight: 600; }
  .portada__saludo {
    font-size: clamp(2.5rem, 11vw, 4.5rem);
    font-size: clamp(2.5rem, 13cqi, 4.75rem);
  }
  .portada__nombre {
    font-size: clamp(3.25rem, 15vw, 7rem);
    font-size: clamp(3.25rem, 18cqi, 8rem);
    font-weight: 900;
  }
  .portada__bajada { font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); }
  .portada .botones { margin-top: 2rem; }

  .portada__grilla {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .portada__foto { max-width: 34rem; }
}

/* ---------- Cinta de servicios ---------- */
/* Franja lavanda de borde a borde, entre la portada y los servicios.
   Las dos listas son iguales: mientras una sale por la izquierda, la otra entra por la derecha. */

.cinta {
  --separacion: 1em;
  display: flex;
  gap: var(--separacion);
  overflow: hidden;
  padding-block: .8rem;
  background: var(--lavanda);
  color: var(--negro);   /* negro sobre lavanda se lee bien: 10 a 1 */
  font-family: var(--fuente-titulos);
  font-size: clamp(.875rem, .75rem + .5vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  text-transform: uppercase;
  user-select: none;
}
@media (min-width: 960px) {
  .cinta {
    padding-block: 1rem;
    font-size: clamp(1rem, .85rem + .6vw, 1.375rem);
    font-weight: 800;
  }
}

.cinta__pista {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  gap: var(--separacion);
  min-width: 100%;
}

.cinta__pista li {
  display: flex;
  align-items: center;
  gap: var(--separacion);
  white-space: nowrap;
}

/* El asterisco del kit en bordó, antes de cada servicio */
.cinta__pista li::before {
  content: "";
  flex: none;
  width: .8em;
  height: .8em;
  background: var(--bordo);
  -webkit-mask: var(--asterisco-mascara) center / contain no-repeat;
  mask: var(--asterisco-mascara) center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .cinta__pista { animation: desplazar 40s linear infinite; }
}
/* En compu se frena al pasar el mouse, para poder leerla */
@media (hover: hover) and (pointer: fine) {
  .cinta:hover .cinta__pista { animation-play-state: paused; }
}

@keyframes desplazar {
  to { transform: translateX(calc(-100% - var(--separacion))); }
}

/* Con "reducir movimiento": quieta, centrada y en dos filas (en compus de 1200 px o más).
   En pantallas más chicas quedarían de 3 a 5 renglones, así que no se muestra: es decorativa y no se pierde nada */
@media (prefers-reduced-motion: reduce) {
  .cinta__pista {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .5rem;
    width: 100%;
    padding-inline: var(--margen);
  }
  .cinta__pista--copia { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1199px) {
  .cinta { display: none; }
}

/* ---------- Secciones ---------- */

.seccion { padding-block: clamp(3rem, 8vw, 6rem); }

/* Las secciones alternan: una sobre crema y la siguiente con el velo lavanda */
.seccion--suave { background: var(--lavanda-velo); }

.titulo-seccion {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
  color: var(--bordo);
}

.seccion__cabeza { max-width: 52rem; }

.seccion__bajada {
  max-width: 40rem;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.5;
}

.seccion__cierre {
  display: flex;
  gap: .9rem;
  max-width: 46rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--fuente-titulos);
  font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}
.seccion__cierre .asterisco {
  margin-top: .2em;
  color: var(--bordo);
}

/* Número en una placa lavanda: tarjetas y servicios */
.numero {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--lavanda);
  color: var(--negro);
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

/* Rótulo chico en mayúsculas, como "¿Qué incluye?" */
.etiqueta {
  font-family: var(--fuente-titulos);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bordo);
}

/* En compu, los títulos grandes y bien negritos */
@media (min-width: 960px) {
  .titulo-seccion {
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: -.015em;
  }
  .seccion__bajada { font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); }
  .seccion__cierre {
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
    font-weight: 500;
  }
  .numero {
    width: 3rem;
    height: 3rem;
    font-size: 1.125rem;
    font-weight: 800;
  }
  .etiqueta { font-weight: 700; }
}

/* ---------- Tarjetas numeradas de servicios ---------- */

.tarjetas {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.tarjeta {
  position: relative;   /* el link "Ver más" se estira y cubre toda la tarjeta */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.25rem;
  background: var(--crema);
  border-radius: var(--redondeo);
  transition: transform .3s var(--curva), box-shadow .3s ease;
}
.tarjeta .numero { transition: background-color .3s, color .3s; }

.tarjeta__titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--bordo);
}

.tarjeta__link {
  margin-top: auto;
  padding-block: .6rem;   /* así se toca fácil con el dedo: 44 px de alto */
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--bordo);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}

/* Toda la tarjeta se puede tocar: el link se estira por encima de ella */
.tarjeta__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--redondeo);
}
/* Con teclado, el recuadro rodea toda la tarjeta */
.tarjeta__link:focus-visible { outline: none; }
.tarjeta__link:focus-visible::after {
  outline: 3px solid var(--negro);
  outline-offset: 3px;
}

/* La flecha de "Ver más" */
.tarjeta__link > [aria-hidden="true"] {
  display: inline-block;
  transition: transform .3s var(--curva);
}

/* En compu, al pasar el mouse el número se pinta de bordó (crema sobre bordó: 8,9 a 1) */
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover .numero {
    background: var(--bordo);
    color: var(--crema);
  }
}
/* …y la tarjeta se eleva con una sombra suave, y la flecha avanza */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -28px color-mix(in srgb, var(--bordo) 55%, transparent);
  }
  .tarjeta:hover .tarjeta__link > [aria-hidden="true"] { transform: translateX(4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .tarjeta:active { transform: scale(.98); }
}

/* En tablet van de a dos; la última ocupa todo el ancho */
@media (min-width: 640px) {
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta:last-child { grid-column: 1 / -1; }
}

/* En compu, más aire y títulos más negritos */
@media (min-width: 960px) {
  .tarjeta {
    gap: .9rem;
    padding: 1.5rem;
  }
  .tarjeta__titulo {
    font-size: 1.5rem;
    font-weight: 800;
  }
  .tarjeta__link { font-weight: 700; }
}

/* En compu: tres arriba y dos abajo */
@media (min-width: 1100px) {
  .tarjetas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tarjeta { grid-column: span 2; }
  .tarjeta:nth-child(n + 4) { grid-column: span 3; }
  .tarjeta:last-child { grid-column: span 3; }
}

/* ---------- Cada servicio ---------- */

.servicio__grilla {
  display: grid;
  gap: 2.5rem;
}

/* El tamaño del título también depende del ancho de su columna,
   así "Mantenimiento" entra entero en las compus de pantalla chica */
.servicio__intro { container-type: inline-size; }

/* Titular grande con una segunda línea en itálica */
.servicio__titulo {
  margin-top: 1.25rem;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.875rem, 1.2rem + 2.5vw, 2.75rem);
  font-size: min(clamp(1.875rem, 1.2rem + 2.5vw, 2.75rem), 13.5cqi);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--bordo);
}
.servicio__subtitulo {
  display: block;
  margin-top: .2em;
  font-size: .6em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--negro);
}

/* Pregunta destacada, en una placa lavanda (negro sobre lavanda se lee bien: 10 a 1) */
.pregunta {
  margin-top: 1.75rem;
  padding: .9rem 1.1rem;
  border-radius: 1rem;
  background: var(--lavanda);
  color: var(--negro);
  font-family: var(--fuente-titulos);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.3;
}

.servicio__texto {
  margin-top: 1.5rem;
  font-size: 1rem;
}

.incluye {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}
.incluye li {
  position: relative;
  padding-left: 1.75rem;
}
/* Viñeta: el asterisco del kit, en bordó */
.incluye li::before {
  content: "";
  position: absolute;
  top: .35em;
  left: 0;
  width: .95em;
  height: .95em;
  background: var(--bordo);
  -webkit-mask: var(--asterisco-mascara) center / contain no-repeat;
  mask: var(--asterisco-mascara) center / contain no-repeat;
}

/* Lista de ítems cortos (community management): en dos columnas */
@media (min-width: 480px) {
  .incluye--corta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1.5rem;
  }
}

.servicio__ideal {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, .15);
}

.servicio__cierre {
  margin-top: 1.25rem;
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 500;
  color: var(--bordo);
}

.servicio .botones { margin-top: 2rem; }

/* Foto de un servicio (webs a medida): debajo del texto, con las puntas redondeadas */
.servicio__foto {
  max-width: 20rem;
  margin-top: 2rem;
}
.servicio__foto img {
  width: 100%;
  border-radius: var(--redondeo);
}

@media (min-width: 960px) {
  .servicio__grilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  /* En compu, el título grande y bien negrito, y los textos un poco más grandes */
  .servicio__titulo {
    font-size: clamp(2.25rem, 8vw, 4rem);
    font-size: min(clamp(2.25rem, 8vw, 4rem), 13.5cqi);
    font-weight: 900;
  }
  .pregunta {
    padding: 1rem 1.25rem;
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
    font-weight: 600;
  }
  .servicio__texto { font-size: 1.125rem; }
  .servicio__cierre {
    font-size: 1.25rem;
    font-weight: 700;
  }
  /* El detalle arranca a la altura del título */
  .servicio__detalle { padding-top: 4.25rem; }
  /* En compu ocupa el hueco que queda al lado de "¿Qué incluye?" */
  .servicio__foto {
    max-width: 22rem;
    margin-top: 2.5rem;
  }
}

/* ---------- Cómo trabajamos ---------- */

.pasos {
  display: grid;
  gap: 1rem;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.paso {
  padding: 1.25rem;
  background: var(--crema);
  border-radius: var(--redondeo);
}

/* Números finitos, que dan un aire más elegante */
.paso__numero {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--bordo);
}

.paso p { margin-top: .75rem; }
.paso strong {
  font-family: var(--fuente-titulos);
  font-weight: 700;
}

@media (min-width: 700px) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paso:last-child { grid-column: 1 / -1; }
}

/* En compu, los números grandes y bien negritos */
@media (min-width: 960px) {
  .paso { padding: 1.5rem; }
  .paso__numero {
    font-size: 3.25rem;
    font-weight: 900;
  }
  .paso strong { font-weight: 800; }
}

@media (min-width: 1100px) {
  .pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .paso:last-child { grid-column: auto; }
}

/* ---------- Sobre mí ---------- */

.sobre-mi__grilla {
  display: grid;
  gap: 2rem;
}

.sobre-mi__foto {
  width: 100%;
  max-width: 30rem;
}

/* La foto va entera, con las puntas redondeadas, como la de la portada */
.sobre-mi__foto img {
  width: 100%;
  border-radius: var(--redondeo);
}

.sobre-mi__texto {
  display: grid;
  gap: 1.1rem;
  max-width: 40rem;
}

/* El último párrafo va más grande, como frase destacada */
.frase-destacada {
  margin-top: .75rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--lavanda);
  font-family: var(--fuente-titulos);
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bordo);
}

/* En compu: la foto a la izquierda (en la portada va a la derecha) y el texto al lado.
   La foto es alta (2 x 3), así que tiene un ancho máximo para que entre en la pantalla */
@media (min-width: 960px) {
  .sobre-mi__grilla {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "foto titulo"
      "foto texto";
    column-gap: clamp(3rem, 6vw, 6rem);
    row-gap: 1.75rem;
  }
  .sobre-mi__grilla > .titulo-seccion { grid-area: titulo; }
  .sobre-mi__foto {
    grid-area: foto;
    align-self: start;
    position: sticky;
    top: calc(var(--alto-encabezado) + 2rem);
    max-width: 26rem;
  }
  .sobre-mi__texto { grid-area: texto; }

  .frase-destacada {
    border-left-width: 4px;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
    font-weight: 600;
  }
}

/* En pantallas bajas la foto no se queda quieta, así no se corta abajo */
@media (min-width: 960px) and (max-height: 760px) {
  .sobre-mi__foto { position: static; }
}

/* ---------- Preguntas frecuentes ---------- */

.preguntas__grilla {
  display: grid;
  gap: 2rem;
}

.preguntas__grupos {
  display: grid;
  gap: 2.25rem;
}

.preguntas__grupo {
  display: grid;
  gap: .6rem;
}
.preguntas__grupo .etiqueta { margin-bottom: .4rem; }

/* Cada pregunta se abre al tocarla (details), así que funciona sin JavaScript */
.pregunta-frecuente {
  border-radius: 1rem;
  background: var(--crema);
}

.pregunta-frecuente summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border-radius: 1rem;
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.pregunta-frecuente summary::-webkit-details-marker { display: none; }
.pregunta-frecuente[open] summary { color: var(--bordo); }
@media (hover: hover) and (pointer: fine) {
  .pregunta-frecuente summary:hover { color: var(--bordo); }
}
.pregunta-frecuente summary { transition: color .2s; }

/* Un "+" en bordó que gira y queda como "×" cuando la pregunta está abierta */
.pregunta-frecuente summary::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(var(--bordo), var(--bordo)) center / 100% 2px no-repeat,
    linear-gradient(var(--bordo), var(--bordo)) center / 2px 100% no-repeat;
}
.pregunta-frecuente[open] summary::after { transform: rotate(45deg); }

@media (prefers-reduced-motion: no-preference) {
  .pregunta-frecuente summary::after { transition: transform .25s var(--curva); }
}

/* La respuesta se abre y se cierra suave. En los navegadores que todavía no lo permiten, se abre de golpe como antes */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .pregunta-frecuente { interpolate-size: allow-keywords; }
    .pregunta-frecuente::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size .35s var(--curva), content-visibility .35s allow-discrete;
    }
    .pregunta-frecuente[open]::details-content { block-size: auto; }
  }
}

.pregunta-frecuente p {
  max-width: 44rem;
  padding: 0 1.1rem 1.1rem;
}

/* La foto va debajo del título, más chica en el celular */
.preguntas__foto {
  max-width: 16rem;
  margin-top: 1.5rem;
}
.preguntas__foto img {
  width: 100%;
  border-radius: var(--redondeo);
}

/* En compu: el título y la foto a la izquierda, quietos mientras bajás, y las preguntas a la derecha */
@media (min-width: 960px) {
  .preguntas__grilla {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .preguntas__lateral {
    position: sticky;
    top: calc(var(--alto-encabezado) + 2rem);
  }
  .preguntas .titulo-seccion { font-size: clamp(2.25rem, 5vw, 4rem); }
  .preguntas__foto {
    max-width: 20rem;
    margin-top: 2rem;
  }

  .pregunta-frecuente summary {
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 700;
  }
  .pregunta-frecuente p { padding: 0 1.25rem 1.25rem; }
}

/* En pantallas bajas no se quedan quietos, así no se corta la foto */
@media (min-width: 960px) and (max-height: 800px) {
  .preguntas__lateral { position: static; }
}

/* ---------- Contacto ---------- */

.contacto__placa {
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem);
  border-radius: calc(var(--redondeo) * 1.5);
  background: var(--bordo);
  color: var(--crema);
}

/* Crema sobre bordó se lee bien (8,9 a 1) */
.contacto .titulo-seccion { color: var(--crema); }
.contacto__placa :focus-visible { outline-color: var(--crema); }

.contacto__texto {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.5;
}

.contacto .botones { margin-top: 2rem; }

.contacto__datos {
  display: grid;
  gap: .25rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 252, 235, .3);
}
.contacto__datos a {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 2.75rem;   /* 44 px: se toca fácil con el dedo */
  text-decoration: none;
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .contacto__datos a:hover {
    text-decoration: underline;
    text-underline-offset: .3em;
  }
}
.contacto__datos .icono {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

/* Foto del escritorio: en el celular va arriba, más apaisada, mostrando la cara y la pantalla */
.contacto__foto {
  max-width: 34rem;   /* en tablets no se agranda de más */
  margin-bottom: 2rem;
}
.contacto__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: var(--redondeo);
}

/* En compu: el texto a la izquierda y la foto entera a la derecha */
@media (min-width: 960px) {
  .contacto__placa {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    grid-template-areas: "contenido foto";
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .contacto__contenido { grid-area: contenido; }
  .contacto__texto { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }
  .contacto__foto {
    grid-area: foto;
    justify-self: end;
    width: 100%;
    max-width: 24rem;
    margin-bottom: 0;
  }
  /* Entera: vuelve a sus medidas (1080 x 1438), así la página no salta al cargarla */
  .contacto__foto img { aspect-ratio: auto 1080 / 1438; }
}

/* ---------- Pie de página ---------- */

.pie {
  /* Abajo deja lugar para que el botón flotante no tape el texto */
  padding-block: 3rem 6.5rem;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.pie__grilla {
  display: grid;
  gap: 2rem;
}

.pie__marca p {
  max-width: 22rem;
  margin-top: .9rem;
}

.pie__lista {
  display: grid;
}
.pie__lista a {
  display: inline-block;
  padding-block: .5rem;   /* así cada link mide unos 44 px de alto */
  font-weight: 500;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .pie__lista a:hover {
    color: var(--bordo);
    text-decoration: underline;
    text-underline-offset: .3em;
  }
}

.pie__derechos {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, .1);
  font-size: .875rem;
  color: rgba(0, 0, 0, .7);
}

@media (min-width: 900px) {
  .pie { padding-bottom: 3rem; }
  .pie__grilla {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .pie__derechos { grid-column: 1 / -1; }
}

/* ---------- Botón flotante de WhatsApp ---------- */

.whatsapp-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;   /* por debajo del encabezado: el menú abierto lo tapa */
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--bordo);
  color: var(--crema);
  /* Aro crema finito: así se distingue también cuando pasa por encima de la placa bordó del cierre */
  box-shadow: 0 0 0 2px var(--crema), 0 10px 24px -8px rgba(0, 0, 0, .5);
  transition: background-color .2s, transform .2s;
}
.whatsapp-flotante .icono {
  width: 1.75rem;
  height: 1.75rem;
}

/* Aparece recién cuando pasaste la portada, que ya tiene su botón de WhatsApp.
   Lo maneja js/main.js: sin JavaScript (o si falla) se ve siempre. */
.con-js .whatsapp-flotante:not(.whatsapp-flotante--visible) {
  opacity: 0;
  visibility: hidden;
  transform: scale(.6);
}

@media (prefers-reduced-motion: no-preference) {
  /* Entra con un pequeño rebote y se va suave */
  .con-js .whatsapp-flotante {
    transition: background-color .2s, opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s;
  }
  .con-js .whatsapp-flotante:not(.whatsapp-flotante--visible) {
    transition: background-color .2s, opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .whatsapp-flotante:active { transform: scale(.94); }
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-flotante:hover { background: var(--negro); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .whatsapp-flotante:hover { transform: translateY(-2px); }
}

@media (min-width: 900px) {
  .whatsapp-flotante {
    right: 1.5rem;
    bottom: 1.5rem;
  }
}

/* ---------- Movimiento ---------- */
/* Todo lo de acá funciona solo con la clase "animar" en <html>. La pone index.html si la persona
   no pidió "reducir movimiento", y se saca si js/main.js no carga. Sin ella, todo se ve quieto. */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(1.75rem); }
}
@keyframes aparecer-foto {
  from { opacity: 0; transform: scale(.96); }
}
@keyframes aparecer-suave {
  from { opacity: 0; }
}
@keyframes subir-linea {
  from { transform: translateY(120%); }
}
/* La foto de la portada se ve desde el primer momento: solo se abre un poquito, así no se retrasa la carga para Google */
@keyframes abrir-marco {
  from { clip-path: inset(4% round var(--redondeo)); }
  to   { clip-path: inset(0 round var(--redondeo)); }
}
@keyframes acomodar-foto {
  from { transform: scale(1.06); }
}

/* Portada: las dos líneas del título suben desde abajo, una detrás de la otra,
   y después aparecen la bajada y los botones */
.animar .portada__saludo,
.animar .portada__nombre {
  /* Recorta abajo, para que cada línea "salga" de su renglón. Arriba y a los costados deja aire */
  clip-path: inset(-.3em -.3em -.16em -.3em);
}
.animar .portada__linea { animation: subir-linea 1s var(--curva-fuerte) .15s backwards; }
.animar .portada__nombre .portada__linea { animation-delay: .3s; }
.animar .portada__servicios { animation: aparecer-suave .8s ease .05s backwards; }
.animar .portada__bajada { animation: aparecer .8s var(--curva) .55s backwards; }
.animar .portada .botones { animation: aparecer .8s var(--curva) .7s backwards; }
.animar .portada__foto { animation: abrir-marco 1.1s var(--curva) backwards; }
.animar .portada__foto img { animation: acomodar-foto 1.4s var(--curva) backwards; }
.animar .cinta { animation: aparecer-suave .8s ease .9s backwards; }

/* Aparecer al bajar: los bloques marcados con data-aparece, y los hijos de los marcados con data-aparece-grupo,
   esperan escondidos hasta que js/main.js les pone "aparecio" */
.animar [data-aparece]:not(.aparecio),
.animar [data-aparece-grupo] > :not([data-aparece-grupo]):not(.aparecio) {
  opacity: 0;
}
.animar .aparecio {
  animation: aparecer .8s var(--curva) backwards;
  animation-delay: calc(var(--orden, 0) * 90ms);   /* los que entran juntos, de a uno */
}
.animar .aparecio[data-aparece="foto"] {
  animation-name: aparecer-foto;
  animation-duration: 1s;
}

/* Al imprimir se ve todo, aunque no se haya bajado hasta ahí */
@media print {
  .animar [data-aparece],
  .animar [data-aparece-grupo] > * {
    opacity: 1 !important;
    animation: none !important;
  }
}