/* =========================================================
   ME QUIERO MUCHO — estilos principales
   Paleta y tipografía inspiradas en el boceto original (Web.png)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Roboto+Condensed:wght@600;700&display=swap');

/* -------------------------------------------------------------
   Tipografía de títulos: "Roboto Condensed" en mayúsculas.
   (Se sustituyó "Dry Brush" porque no cargaba de forma fiable en
   todos los navegadores.) Roboto Condensed sí incluye todos los
   acentos y la "ñ" de forma nativa, sin necesidad de fuentes de
   respaldo.
   ------------------------------------------------------------- */

:root{
  /* Colores */
  --color-bg: #FBF3EB;          /* crema/rosa muy claro de fondo — igual en home y test */
  --color-bg-soft: #FBF3EB;
  --color-pink: #EE518A;        /* rosa intenso — acento principal */
  --color-pink-dark: #EE518A;
  --color-pink-light: #FFCDDE;
  --color-text: #3A2E2C;        /* texto principal, casi negro cálido */
  --color-text-soft: #6B5D59;
  --color-line: #F2AFC6;

  /* Tipografía */
  --font-title: 'Roboto Condensed', 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;

  /* Layout */
  --max-width: 480px;           /* columna central elegante en escritorio */
  --radius-lg: 28px;
  --radius-md: 18px;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 2.75rem;

  /* Movimiento */
  --ease-soft: cubic-bezier(.45,.05,.35,1);
  --dur-float: 3.2s;
  --dur-transition: .5s;
}

/* =========================================================
   Reset básico
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }

/* Quita el recuadro/resalte de color que algunos navegadores móviles
   muestran al tocar un enlace o botón (no es un borde nuestro, es el
   "tap highlight" del propio navegador). */
a, button, [role="button"]{
  -webkit-tap-highlight-color: transparent;
}

/* Red de seguridad: algunos navegadores móviles aplican el resaltado
   táctil también a elementos no interactivos dentro de un enlace o
   botón (imágenes, spans...). Lo desactivamos en toda la página. */
*{
  -webkit-tap-highlight-color: transparent;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; height: auto; }
button{ font-family: inherit; }
a{ color: inherit; }

/* Zonas táctiles accesibles */
button, a.btn, .img-link{
  min-height: 44px;
}

/* Foco visible para accesibilidad de teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--color-pink-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Las secciones de producto reciben el foco por accesibilidad al
   revelarse (para que los lectores de pantalla las anuncien), pero
   eso no debe dibujar un marco alrededor de todo el bloque de texto. */
.section:focus,
.section:focus-visible{
  outline: none;
}

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =========================================================
   Contenedor central (columna elegante en escritorio)
   ========================================================= */
.wrapper{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* =========================================================
   HERO / HEADER
   ========================================================= */
.hero{
  text-align: center;
  padding: var(--space-lg) 1.25rem var(--space-md);
}

.hero__logo-link{
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
}

.hero__logo{
  max-width: 150px;
  margin: 0 auto var(--space-sm);
}

.hero__subtitle{
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .02em;
  font-size: clamp(.62rem, 3.3vw, .95rem);
  color: var(--color-text);
  margin: 0 auto .4rem;
  text-transform: uppercase;
}

.hero__tagline{
  font-size: clamp(.44rem, 1.95vw, .8rem);
  color: var(--color-pink-dark);
  font-weight: 500;
  margin: 0 auto;
}

/* =========================================================
   TRES BLOQUES PRINCIPALES (imágenes clicables)
   ========================================================= */
.blocks{
  padding: .5rem .5rem var(--space-lg);
}

.blocks__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "perfume perfume"
    "potingues talleres";
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
}

.img-link{
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

.img-link:focus,
.img-link:focus-visible,
.img-link:active{
  outline: none;
  border: none;
  box-shadow: none;
}

.img-link__inner{
  display: inline-block;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.img-link img{
  margin: 0 auto;
  width: 100%;
  max-width: 230px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.img-link--perfume{ grid-area: perfume; }
.img-link--potingues{ grid-area: potingues; }
.img-link--talleres{ grid-area: talleres; align-self: end; margin-top: 1.25rem; }

/* Tamaño de las 3 imágenes: una sola fórmula continua (sin saltos
   entre "móvil", "tablet" y "escritorio"). Cada una crece de forma
   suave y proporcional según el ancho de la pantalla, desde el
   móvil más pequeño hasta el escritorio más grande. */
.img-link--perfume img{ max-width: clamp(170px, calc(179px + 2.86vw), 260px); }
.img-link--potingues img{ max-width: clamp(134px, calc(141px + 2.26vw), 205px); }
.img-link--talleres img{ max-width: clamp(154px, calc(162px + 2.59vw), 235px); }

/* Animación flotante orgánica y sutil */
.float{
  animation: floaty var(--dur-float) ease-in-out infinite;
}
.float--delay1{ animation-delay: .8s; }
.float--delay2{ animation-delay: 1.6s; }

@keyframes floaty{
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-8px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* =========================================================
   Separador de puntos
   ========================================================= */
.dotted-divider{
  border: none;
  border-top: 3px dotted var(--color-pink);
  opacity: .8;
  margin: 0 auto;
  width: var(--mobile-content-width, calc(100% - 2.5rem));
  max-width: 420px;
  display: none;
}

.dotted-divider.is-revealed{
  display: block;
}

/* =========================================================
   SECCIONES DE CONTENIDO
   ========================================================= */
.section{
  padding: var(--space-lg) 0;
  text-align: left;
  width: var(--mobile-content-width, calc(100% - 2.5rem));
  max-width: 420px;
  margin: 0 auto;
  display: none;
}

.section.is-revealed{
  display: block;
  animation: section-fade-in .45s var(--ease-soft);
}

@keyframes section-fade-in{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .section.is-revealed{ animation: none; }
}

/* La imagen "grande" de cada sección solo se usa en el layout de
   escritorio (ver media query más abajo). En móvil seguimos usando
   las miniaturas clicables del bloque .blocks de más arriba. */
.section__media{
  display: none;
}

.section__title{
  font-family: var(--font-title);
  color: var(--color-pink);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: .01em;
  margin: 0 0 .3rem;
}

.section__price{
  font-family: var(--font-title);
  color: var(--color-pink);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .95rem;
  margin: 0 0 var(--space-sm);
}

.section__text{
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  max-width: 40ch;
}

.section__actions{
  display: flex;
  justify-content: flex-end;
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--color-pink);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .95rem;
  text-decoration: none;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .18s var(--ease-soft), background-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 14px rgba(222,62,119,.25);
}

.btn:hover{
  background: var(--color-pink-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(222,62,119,.32);
}

.btn:active{
  transform: translateY(0) scale(.97);
}

.btn svg, .btn .icon{
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* Botones-imagen (assets recortados a medida: AL TEST, TE CUENTO,
   HABLEMOS, ENVIAR) — bordes rectos/cuadrados como en el boceto */
.btn-img{
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  min-height: 0; /* los botones-imagen ya definen su propio tamaño con la imagen */
  box-shadow: 0 4px 10px rgba(222,62,119,.14);
  transition: transform .18s var(--ease-soft), box-shadow .18s ease;
}

.btn-img img{
  display: block;
  width: 165px;
  max-width: 55vw;
  height: auto;
}

.btn-img--small img{
  width: 130px;
}

.btn-img:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(222,62,119,.2);
}

.btn-img:active{
  transform: translateY(0) scale(.96);
}

.btn-img:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   FOOTER — fila de flores repetida
   ========================================================= */
.site-footer{
  padding: var(--space-lg) 0 2rem;
}

.site-footer__about{
  display: flex;
  justify-content: center;
  padding: 0 1.25rem 1.75rem;
}
.site-footer__about .btn-img{
  box-shadow: none;
}
.site-footer__about .btn-img img{
  width: 160px;
  max-width: 45vw;
}

.footer__flowers{
  height: 60px;
  background-image: url('../assets/img/Formabase.png');
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 100%;
  opacity: .9;
}

.footer__links{
  text-align: center;
  font-size: .78rem;
  color: var(--color-text-soft);
  margin-top: 1.25rem;
  padding: 0 1.25rem;
}

.footer__links a{
  color: var(--color-pink-dark);
  text-decoration: underline;
}

/* =========================================================
   Responsive — tablet / escritorio
   Basado en Web_desktop_talleres.png: en escritorio solo se ven las
   3 imágenes animadas del collage (sin texto). Al hacer clic en una,
   aparece su texto justo debajo con una transición suave; el título
   no se repite en el texto porque ya está incluido en la imagen.
   ========================================================= */
@media (min-width: 900px){
  body{
    background: var(--color-bg);
  }
  .page{
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .hero{
    padding: 2rem 1.5rem 0;
  }

  /* ---- Lienzo posicionado: collage + textos revelables ----
     Las coordenadas están calcadas de Web_desktop.png (lienzo de
     referencia 1920×510 para esta zona) convertidas a porcentajes,
     para que cada imagen y su texto queden exactamente donde se
     ve en la muestra. */
  .stage{
    position: relative;
    width: 100%;
    max-width: 1700px;
    margin: 1rem auto .75rem;
    height: 420px;
  }

  .blocks{
    position: static;
    padding: 0;
  }
  .blocks__grid{
    display: contents;
  }

  .img-link{
    position: absolute;
    width: auto;
  }
  .img-link__inner{
    width: auto;
  }

  .img-link--perfume{
    left: 45%;
    top: 9%;
  }
  .img-link--potingues{
    left: 32%;
    top: 34%;
  }
  .img-link--talleres{
    left: 51.25%;
    top: 65%;
  }

  /* Cada línea de puntos y su bloque de texto quedan fijados en la
     posición exacta de la referencia, y solo se hacen visibles
     (opacity) cuando su sección tiene .is-revealed — así no se
     desplaza el resto del contenido ni el texto "salta" fuera de
     la página. */
  .dotted-divider{
    position: absolute;
    display: block;
    border-top: 3px dotted var(--color-pink);
    margin: 0;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
  }
  .dotted-divider--perfume{ left: 61.35%; width: 19.3%; top: 9.6%; }
  .dotted-divider--potingues{ left: 10.25%; width: 19.5%; top: 40%; }
  .dotted-divider--talleres{ left: 69.35%; width: 19.4%; top: 59.6%; }

  .section{
    position: absolute;
    display: block;
    max-width: none;
    min-width: min(300px, 30vw);
    margin: 0;
    text-align: left;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
  }

  #perfume{ left: 61.35%; width: 19.3%; top: 11%; }
  #potingues{ left: 10.25%; width: 19%; top: 45%; }
  #talleres{ left: 69.35%; width: 19.4%; top: 64%; }

  .section.is-revealed{
    animation: none;
    opacity: 1;
    pointer-events: auto;
  }
  .dotted-divider.is-revealed{
    opacity: 1;
  }

  /* El título ya está incluido en la propia imagen del collage. */
  .section__title{
    display: none;
  }

  .section__price{
    text-align: left;
    white-space: nowrap;
    font-size: .85rem;
  }

  .section__text{
    max-width: 38ch;
    font-size: .9rem;
    line-height: 1.45;
    margin-bottom: 1rem;
  }

  .section__actions{
    justify-content: flex-end;
  }

  /* Botones un poco más discretos en escritorio */
  .btn-img img{
    width: 150px;
  }
  .btn-img--small img{
    width: 150px;
  }

  .site-footer{
    padding-top: 1.5rem;
    margin-top: auto;
  }
}

@media (prefers-reduced-motion: reduce){
  .section, .dotted-divider{ transition: none; }
}


/* =========================================================
   Accesibilidad de movimiento
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}