/* ==========================================================
   Lucila Elsegood — custom/styles.css  (v4, sobrio)
   Copiar fonts/*.woff2 junto a este archivo (custom/fonts/)
   Criterio: una tinta (ciruela) + rosa de base + UN acento (fucsia).
   El acento solo va en botones principales, hover de links y la
   etiqueta "El más elegido". El resto del color viene del rosa.
   Hooks: .articulo.enHome.lucila-{hero,metas,servicios,clientes,sobre-mi,puntuales}
   ========================================================== */

/* Títulos: Bricolage Grotesque (Google Fonts). Avenir sigue en el texto y Zapfino en la firma. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&display=swap");

@font-face{font-family:"Avenir";font-weight:300;font-style:oblique;font-display:swap;
  src:url("fonts/avenir-lightoblique.woff2") format("woff2")}
@font-face{font-family:"Avenir";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/avenir-medium.woff2") format("woff2")}
@font-face{font-family:"Avenir";font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/avenir-heavy.woff2") format("woff2")}
@font-face{font-family:"Zapfino";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/zapfino.woff2") format("woff2")}

:root{
  --lu-tinta:#2d1b26;
  --lu-rosa:#f0d5de;              /* rosa base (antes #fadfd9) */
  --lu-rosa-2:#ff9fbd;            /* tono más suave para alternar */
  --lu-rosa-pale:#fff0f4;         /* bandas casi blancas */
  --lu-rosa-3:rgba(255,159,189,.3);
  --lu-rosa-7:rgba(255,159,189,.7);
  --lu-rosa-fuerte:var(--lu-rosa-2);
  --lu-acento:#d6245c;
  --lu-linea:rgba(45,27,38,.14);
  --lu-radio:1.75rem;
  --lu-display:"Bricolage Grotesque","Avenir","Avenir Next",system-ui,sans-serif;
  --lu-lado:10.3vw;
  --lu-gris:var(--lu-tinta);
  /* recorte de las fotos de clientes: 11.5% mientras traigan el anillo degradé
     incrustado; con fotos limpias (sin anillo) poner 0% */
  --cl-recorte:11.5%;
}

html,body{overflow-x:hidden}
html{scroll-behavior:smooth}
.articulo.enHome, #precios, #contacto{scroll-margin-top:5rem}

body{
  font-family:"Avenir","Avenir Next",system-ui,sans-serif;
  font-weight:400;color:var(--lu-tinta);background:#fff;
}

header .container{
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

header .top, header .logo{
	display: none;
}

header ul.options{
	float: left;
	border-bottom: 1px solid var(--lu-gris);
	padding-left: 8%;
}

header .options a{
    font-weight: 400;
    font-size: .879rem;
    color: var(--lu-tinta);
    opacity: .4;
    z-index: 500;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
	text-align: left;
	padding: 1rem 1rem 1rem 0;
	text-transform: uppercase;
}

header.reduce ul.options{
	background-color: rgba(255,255,255,.2);
	backdrop-filter:blur(5px);
}

header.reduce .options a{
    opacity: 1;
}

/* ===== Hamburguesa ===== */
header .hamburger--collapse .hamburger-inner,
header .hamburger--collapse .hamburger-inner:before,
header .hamburger--collapse .hamburger-inner:after{
  height:2px;
  border-radius:2px;
  background-color:var(--lu-gris);
}

/* ===== Header en pantallas internas ===== */
header.inside{
  position:relative;
  background:#fff;
}

header.inside > .container{
  display:flex;
  align-items:center;
  padding:.5rem 0 .5rem 8%;
}
header.inside > .container > .clearfix{display:none}   /* el span vacío contaba como ítem flex */

header.inside .logo{
  display:block;
  flex:0 0 auto;
  width:clamp(130px,12vw,165px);
  aspect-ratio:992.2/281.1;
  margin:0 2.5rem 0 0;
  position:relative;
  top:2px;                         /* ajuste fino de baseline */
  background:url(/custom/logo.svg) no-repeat left center / contain;
  font-size:0;
  text-indent:-9999px;
  overflow:hidden;
}

header.inside ul.options,
header.inside.reduce ul.options{
  float:none;
  width:auto;
  padding-left:0;
  border-bottom:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.articulo.enHome.lucila-hero .container {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    padding-top: calc(var(--header-height) + 12rem);
}

.articulo.enHome.lucila-hero{
	background-color: var(--lu-rosa-3);
}

.articulo.enHome.lucila-hero h1 {
    order: 2;
    font-family: "Zapfino", "Snell Roundhand", cursive;
    font-size: 7.5vw;
    line-height: 1.5;
    margin-left: -1vw;
    position: relative;
    z-index: 100;
}

.articulo.enHome.lucila-hero p:has(img){
	z-index: -1;
}

.articulo.enHome.lucila-hero p > img:nth-of-type(1) {
  position: absolute;
  width: 17vw;
  top: 60vh;
  right: 5vw;
  transform: rotate(10deg);
  animation: taza-entra 1.2s ease-out both;
}
.articulo.enHome.lucila-hero p > img:nth-of-type(2) {
	position: absolute;
    width: 30vw;
    top: 70vh;
    right: 25vw;
	height: auto!important;
}
.articulo.enHome.lucila-hero p > img:nth-of-type(3) {
    height: 90vh!important;
    width: auto;
    position: absolute;
    top: -17vh;
    right: -35vh;
    z-index: 50;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

.articulo .imagenEpigrafe:not(:has(img)) {
    display: none;
}

.articulo.enHome.lucila-hero .texto {
    display: contents;
}

.articulo.enHome.lucila-hero .texto > p:nth-child(1) {
    order: 1;
    justify-self: end;
    margin-right: 8vw;
    font-size: 1vw;
    text-transform: uppercase;
    letter-spacing: .02em;
top: calc(-7.5vw - 4rem);
    position: relative;
}

.articulo.enHome.lucila-hero .texto > p:nth-child(2) {
    order: 3;
    width: 42%;
    margin-top: -6vh;
    font-size: 1.3vw;
    line-height: 2vw;
}

.articulo.enHome.lucila-hero .texto > p:nth-child(3) {
    order: 4;
    margin-top: 1rem;
}

.articulo.enHome.lucila-metas {
  --caida: 14.3vw;
  margin-top: 40vh;
  position: relative;
  isolation: isolate;              /* el fondo no se escapa detrás de la página */
  padding-block: var(--caida);     /* contenido en la zona segura */
}

.articulo.enHome.lucila-metas::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 50vw;                   /* alto de la banda, ajustalo */
  transform: translateY(-50%);    /* centrada vertical */
  z-index: -1;
  background: #faeeea;
  clip-path: polygon(
    0 0,
    100% var(--caida),
    100% 100%,
    0 calc(100% - var(--caida))
  );
}

.articulo.enHome.lucila-metas h1, .articulo.enHome.lucila-servicios h1{
	left: -500vw;
	opacity: 0;
	position: absolute;
}

.articulo.enHome.lucila-metas .texto, .articulo.enHome.lucila-servicios .texto, .articulo.enHome.lucila-clientes .texto{
	width: 100%;
}

.articulo.enHome.lucila-metas .texto ul, .articulo.enHome.lucila-servicios ul, .articulo.enHome.lucila-clientes ul{
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	justify-content: center;
}

.articulo.enHome.lucila-metas .texto ul li{
	color: #ffffff;
	flex: 0 0 30%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--lu-tinta);
	display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  color: #fff;
  background-color: var(--lu-tinta);
  text-align: center;
    font-size: 1.3vw;
    font-family: Avenir;
    font-weight: 700;
    color: var(--lu-rosa);
    width: 90%;
}

.articulo.enHome.lucila-metas .texto ul li:nth-child(6n+4),
.articulo.enHome.lucila-metas .texto ul li:nth-child(6n+5),
.articulo.enHome.lucila-metas .texto ul li:nth-child(6n) {
	color: var(--lu-tinta);
	background-color: var(--lu-rosa);
}

.articulo.enHome.lucila-servicios{
	margin-bottom: 6rem!important;
}

.articulo.enHome.lucila-servicios ul li{
	    border-radius: 2rem;
    display: flex;
    justify-content: space-between;
	flex: 0 0 calc(25% - 2rem);
    flex-direction: column;
    align-items: center;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
	padding: 2rem;
    font-size: .879rem;
    line-height: 1.7vw;
    text-align: justify;
	border: 1px solid rgba(0,0,0,0);
	-webkit-box-shadow: 2px 2px 20px 4px rgba(0,0,0,0);
	box-shadow: 2px 2px 20px 4px rgba(0,0,0,0);
	transition: all .3s;
}

.articulo.enHome.lucila-servicios ul li:hover{
	border: 1px solid rgba(0,0,0,0.5);
	-webkit-box-shadow: 2px 2px 20px 4px rgba(0,0,0,0.51);
	box-shadow: 2px 2px 20px 4px rgba(0,0,0,0.51);
}

.articulo.enHome.lucila-servicios ul li img{
    width: 70%;
    height: auto;
    margin-bottom: 1rem;
}

.articulo.enHome.lucila-servicios ul li strong, .articulo.enHome.lucila-servicios ul li b{
    color: var(--lu-tinta);
    font-size: 2vw;
    margin-bottom: 1rem;
    font-family: Avenir;
    font-weight: 400;
    width: 100%;
	line-height: 1.4;
	display: inline-block;
}

.articulo.enHome.lucila-clientes{
	margin-bottom: 6rem!important;
}

.articulo.enHome.lucila-clientes h1{
	text-align: center;
	font-size: 3rem;
    font-weight: 700;
    color: var(--lu-tinta);
}

.articulo.enHome.lucila-clientes h1:after{
	content: "";
	display: block;
	width: 20%;
	margin: 2rem auto 4rem;
	height: 5px;
	background-color: var(--lu-rosa);
}

.articulo.enHome.lucila-clientes ul li{
    display: flex;
    justify-content: space-between;
	flex: 0 0 calc(25% - 2rem);
    flex-direction: column;
    align-items: center;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
	padding: 0;
    font-size: .879rem;
    line-height: 1.7vw;
    text-align: center;
	transition: all .3s;
}

.articulo.enHome.lucila-clientes ul li img{
	width: 150px!important;
	transition: all .3s;
}

.articulo.enHome.lucila-clientes ul li img:hover{
	opacity: .5;
}

.articulo.enHome.lucila-clientes ul li a{
	text-decoration: none;
	color: var(--lu-tinta);
}

.articulo.enHome.lucila-clientes ul li strong{
	font-size: 1.125rem;
	font-size: 400;
}

.articulo.enHome.lucila-sobre-mi{
	margin-bottom: 0!important;
}

.articulo.enHome.lucila-sobre-mi > .container{
	width: 100%;
	max-width: 100%;
	background-color: var(--lu-rosa-3);
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
	"imagen titulo"
	"imagen texto";
	align-items: start;
	margin-bottom: 0!important;
}

.articulo.enHome.lucila-sobre-mi h1 {
  grid-area: titulo;
  text-align: right;
  font-style: italic;
  font-weight: 300;
  margin: 18vh 18% 2rem 12%;
}

.articulo.enHome.lucila-sobre-mi .imagenEpigrafe {
  grid-area: imagen;
  align-self: stretch;           /* alto completo */
  width: auto; float: none; margin: 0;
}

.articulo.enHome.lucila-sobre-mi .imagen.cuadrada {
  height: 100%;
  padding: 0;                    /* anula el truco del cuadrado */
}

.articulo.enHome.lucila-sobre-mi .imagen.cuadrada:after {
	display: none;
}

.articulo.enHome.lucila-sobre-mi .imagen img {
  position: static;
  transform: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;      /* encuadre, ajustalo */
  display: block;
}

.articulo.enHome.lucila-sobre-mi .texto {
  grid-area: texto;
  width: auto; float: none;
  margin: 0 18% 8vh 24%;
  text-align: justify;
  line-height: 2;
	font-size: .879rem;
}

.articulo.enHome.lucila-sobre-mi .clearfix { display: none; }

/* ===== CONTACTO ===== */
#contacto.contacto {
  background-color: var(--lu-rosa);
  position: relative;
  margin: 0;
  padding: 4rem 0 5rem;
}

#contacto .container {
  position: relative;              /* ancla de la foto */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 6rem;
  row-gap: .5rem;
  align-items: start;
	padding: 3rem 0;
}

/* ---- columna izquierda ---- */
#contacto h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 .5rem;
  line-height: 1.1;
  font-family: "Zapfino", "Snell Roundhand", cursive;
}

#contacto p {
  margin: 0;
  line-height: 1.4;
}

#contacto p:nth-of-type(1) {       /* intro */
  grid-column: 1;
  grid-row: 2;
}

#contacto form {
	margin-top: 2rem;
  grid-column: 1;
  grid-row: 3 / 5;
  --bs-gutter-y: .5rem;
}

#contacto form label {
  margin-bottom: .2rem;
  font-size: .9rem;
}

#contacto #form_contactanos > .form-group {
  flex: 0 0 100%;
  max-width: 100%;
}

#contacto .form-control {
  border-radius: 2rem;
  padding: .55rem 1rem;
}

#contacto textarea.form-control {
  border-radius: 1.5rem;
  min-height: 9rem;
}

.btn.btn-primary.btn-call{
    color: #fff;
	padding: .5rem 1rem;
    background-color: var(--lu-tinta);
    border-radius: 40px;
    border: none;
    cursor: pointer;
    z-index: 70;
    box-shadow: 0 20px 50px -10px var(--lu-tinta);
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.btn.btn-primary.btn-call:hover{
	background-color: rgba(45, 27, 38, .95);
    color: hsla(0, 0%, 100%, .95);
}

/* ---- foto (absoluta, no ocupa fila) ---- */
#contacto p:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
}

#contacto img {
  position: absolute;
  top: -12.5vh;
  right: 8vw;
  width: 20vw !important;
  height: auto !important;
  transform: rotate(15deg);
  box-shadow: -2px 2px 10px 0 rgba(45, 27, 38, .5);
}

/* ---- columna derecha, abajo ---- */
#contacto p:nth-of-type(3) {       /* "O envíame un email a" */
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  font-family: "Zapfino", "Snell Roundhand", cursive;
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.4;
}

#contacto p:nth-of-type(3) a {
  display: block;
  margin-top: 1rem;
  font-family: Avenir;
  font-weight: 400;
  font-style: normal;
  font-size: 2.2rem;
  line-height: 1.2;
  color: var(--lu-tinta);
  text-decoration: none;
}

#contacto p:nth-of-type(4) {       /* teléfonos */
  grid-column: 2;
  grid-row: 4;
  margin-top: .5rem;
}

#contacto p:has(+ form) {
	display: none;
}

footer{
	padding: 2rem 0;
	background-color: var(--lu-gris);
}

footer .links{
	display: none;
}

footer *{
	color: #ffffff;
}

/*Preloader*/

#preloader{
	display: block;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 9999;
	background-repeat: no-repeat;
	background: rgba(255, 255, 255, .5);
	top: 0;
	left: 0;
	text-align: center;
    backdrop-filter: blur(10px);
}

body:has(.enConstruccion) #preloader{
	display: none;
}

#preloader #status{
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	color: #333333;
}

#preloader #status img:first-of-type{
	width: 250px;
	height: auto;
	margin-bottom: 30px;
}

#preloader #status img.loading{
	width: 30%;
}

.ytmVideoInfoChannelContainer{
	display: none!important
}

/* ==========================================================
   ORDEN DE LAS SECCIONES (body > section)
   hero · metas · servicios · clientes · planes · puntuales · sobre mí · contacto
   ========================================================== */
body:has(.articulo.enHome.lucila-hero){display:flex;flex-direction:column;min-height:100vh}
body:has(.articulo.enHome.lucila-hero) > header{order:0}
body:has(.articulo.enHome.lucila-hero) > section{order:50;width:100%}
body:has(.articulo.enHome.lucila-hero) > .lucila-hero{order:1}
body:has(.articulo.enHome.lucila-hero) > .lucila-metas{order:2}
body:has(.articulo.enHome.lucila-hero) > .lucila-servicios{order:3}
body:has(.articulo.enHome.lucila-hero) > .lucila-clientes{order:6}
body:has(.articulo.enHome.lucila-hero) > #precios{order:4}
body:has(.articulo.enHome.lucila-hero) > .lucila-puntuales{order:5}
body:has(.articulo.enHome.lucila-hero) > .lucila-sobre-mi{order:7}
body:has(.articulo.enHome.lucila-hero) > #contacto{order:8}
body:has(.articulo.enHome.lucila-hero) > footer{order:9;margin-top:auto}

/* ===== PRECIOS ===== */
#precios.pricing {
  --caida: 10vw;                    /* inclinación, ajustala */
  position: relative;
  isolation: isolate;               /* el fondo no se escapa detrás */
  background: none;
  padding: 7rem 0 8rem;
	margin-bottom: 0;
}

#precios.pricing::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4rem;                        /* la banda no ocupa todo el alto */
  bottom: 4rem;
  z-index: -1;
  background: var(--lu-rosa);
  clip-path: polygon(
    0 var(--caida),                 /* arriba izquierda: baja */
    100% 0,                         /* arriba derecha: sube */
    100% calc(100% - var(--caida)),
    0 100%                          /* abajo izquierda: baja */
  );
}

#precios h2 {
	text-align: center;
	font-size: 3rem;
	font-weight: 700;
	color: var(--lu-tinta);
}

#precios h2:after {
    content: "";
    display: block;
    width: 20%;
    margin: 2rem auto 4rem;
    height: 5px;
    background-color: var(--lu-tinta);
}

/* contenedor sin clase: grid de 3 */
#precios .container > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

/* tarjeta */
#precios .plan {
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;
  float: none;
  margin: 0;
  padding: 2.5rem 2rem 2rem;
  background: #fff;
  border: 0;
  border-top: 0;
  border-radius: 2rem;
  box-shadow: 0 6px 20px rgba(45, 27, 38, .12);
  text-align: center;
}

#precios .planNombre {
  margin: 0 0 .5rem;
  font-family: "Zapfino", "Snell Roundhand", cursive;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5rem;
  padding-block: .2em;
  overflow: visible;
  text-transform: none;
  color: var(--lu-tinta);
	margin-top: 2rem;
}

#precios .planPrecio {
  margin: 0 0 1.5rem;
  font-family: Avenir, sans-serif;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--lu-tinta);
}
#precios .planPeriodo { font-size: 1rem; }

/* cuerpo */
#precios .planCaracteristicas {
  flex: 1 1 auto;               /* empuja los botones al pie */
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
  font-size: .95rem;
  line-height: 1.4;
}

#precios .planCaracteristicas p {
  margin: 0 0 1rem;
  text-align: center;
}

#precios .planCaracteristicas ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

#precios .planCaracteristicas li {
  position: relative;
  margin: 0 0 .5rem;
  padding-left: 1.7rem;
  background: none;
}

#precios .planCaracteristicas li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .1em;
  width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lu-rosa);
  color: var(--lu-tinta);
  font-size: .7rem;
  line-height: 1;
}

#precios .planCaracteristicas p:last-child {   /* "Desde $... por mes" */
  margin-bottom: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--lu-rosa);
  font-size: .85rem;
}

/* etiqueta "El más elegido" */
#precios .planCaracteristicas p:has(> em) {
  position: absolute;
  top: -.8rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .3rem 1rem;
  background: var(--lu-tinta);
  color: #fff;
  border-radius: 2rem;
  font-size: .75rem;
  white-space: nowrap;
}
#precios .planCaracteristicas p:has(> em) em { font-style: normal; }

/* tarjeta destacada */
#precios .plan:has(p > em) {
  border: 2px solid var(--lu-tinta);
}

/* botones */
#precios .btn {
  display: block;
  margin: 0 0 .75rem;
  padding: .7rem 1.5rem;
  border-radius: 2rem;
  border: 2px solid var(--lu-tinta);
  background: var(--lu-tinta);
  color: #fff;
  text-align: center;
  text-decoration: none;
}
#precios .btn:last-child { margin-bottom: 0; }

#precios .btn.outline {
  background: transparent;
  color: var(--lu-tinta);
}
#precios .btn:hover { opacity: .85; }

/* ===== ÍCONOS DE PLANES ===== */
#precios {
  --ico-camara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d1b26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h4l2-3h6l2 3h4v11H3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
  --ico-crece: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d1b26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l6-6 4 4 6-7'/%3E%3Cpath d='M15 8h5v5'/%3E%3C/svg%3E");
  --ico-chispa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d1b26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L5 14h6l-1 8 8-12h-6z'/%3E%3C/svg%3E");
}

#precios .plan::before {
  content: "";
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background-color: var(--lu-rosa);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}

#precios .plan:nth-child(1)::before { background-image: var(--ico-camara); }
#precios .plan:nth-child(2)::before { background-image: var(--ico-crece); }
#precios .plan:nth-child(3)::before { background-image: var(--ico-chispa); }

/* ===== SERVICIOS PUNTUALES ===== */
.articulo.enHome.lucila-puntuales {
  padding: 4rem 0;
}

.articulo.enHome.lucila-puntuales h1 {
	text-align: center;
	font-size: 3rem;
	font-weight: 700;
	color: var(--lu-tinta);
}

.articulo.enHome.lucila-puntuales h1:after {
    content: "";
    display: block;
    width: 20%;
    margin: 2rem auto 4rem;
    height: 5px;
    background-color: var(--lu-rosa);
}

.articulo.enHome.lucila-puntuales .imagenEpigrafe { display: none; }

.articulo.enHome.lucila-puntuales .texto {
  width: 100%;
  float: none;
  margin: 0;
  height: auto !important;          /* pisa el JS de .match */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* intro, "¿Necesitás algo distinto?" y botón: ancho completo */
.articulo.enHome.lucila-puntuales .texto > p {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  line-height: 1.5;
}

.articulo.enHome.lucila-puntuales .texto ul {
  display: contents;                /* las li pasan a ser celdas del grid */
}

.articulo.enHome.lucila-puntuales .texto li {
  list-style: none;
  margin: 0;
  padding: 1.75rem 1.5rem;
  background: var(--lu-rosa);
  border-radius: 1.5rem;
  text-align: center;
  line-height: 1.5;
}

.articulo.enHome.lucila-puntuales .texto li strong {
  display: block;
  margin-bottom: .5rem;
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--lu-tinta);
}

.articulo.enHome.lucila-puntuales .texto li strong:after {
	content: "";
	width: 10%;
	height: 1px;
	background-color: var(--lu-tinta);
	display: block;
	margin: .5rem auto 1rem;

}

.articulo.enHome.lucila-puntuales .texto p:last-child {
  margin-top: .5rem;
}

.articulo.enHome.lucila-puntuales .btn {
  border-radius: 2rem;
  padding: .7rem 2rem;
}

/* ===== Pantalla de plan (plantilla producto) ===== */
section.producto{
  --plan-top:3.5rem;
  padding:var(--plan-top) 0 3rem;
  background:var(--lu-rosa-3);
  text-align:center;
}

section.producto .container{max-width:720px;margin:0 auto;padding:0 16px}

/* sin foto: no hay galería ni hueco */
section.producto .carouselProducto:not(:has(img)),
section.producto .thumbs:not(:has(img)){display:none}
section.producto .datosProducto{float:none;width:100%;margin:0 auto;text-align:center}

/* envío y pago no aplican a un plan */
section.producto .formas{display:none}

section.producto h1{
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:300;
  color:var(--lu-tinta);
  margin:0 0 .75rem;
}
section.producto .precio,
section.producto .precioOriginal{
  font-size:1.5rem;
  color:var(--lu-tinta);
  margin:0;
}

/* descripción */
section.producto + section .descripcion{
  max-width:640px;
  margin:3rem auto;
  padding:0 16px;
  line-height:1.7;
  color:var(--lu-tinta);
}
section.producto + section .descripcion ul{
  list-style:none;
  padding:0;
  margin:1.75rem 0;
}
section.producto + section .descripcion li{
  position:relative;
  padding:.75rem 0 .75rem 2rem;
  border-bottom:1px solid var(--lu-rosa);
}
section.producto + section .descripcion li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--lu-tinta);
}
section.producto + section .descripcion p:last-child{
  margin-top:2rem;
  padding:1.1rem;
  text-align:center;
  font-size:1.2rem;
  background:var(--lu-rosa);
  border-radius:12px;
}

/* ===== CTA del plan ===== */
section.producto .btn-call{
  display:inline-block;
  width:auto !important;      /* pisa w-100 de Bootstrap */
  min-width:260px;
  max-width:100%;
  margin:1.75rem auto 0;
  padding:1rem 2.25rem !important;
  background:var(--lu-tinta);
  color:#fff;
  border:2px solid var(--lu-tinta);
  border-radius:999px;
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .2s, color .2s, transform .2s;
}
section.producto .btn-call:hover,
section.producto .btn-call:focus-visible{
  background:var(--lu-rosa);
  color:var(--lu-tinta);
  transform:translateY(-2px);
}
section.producto .btn-call:focus-visible{outline:2px solid var(--lu-tinta);outline-offset:3px}

section .descripcion p em:only-child{
	display: none;
}

/* ==========================================================
   V4 — SOBRIO
   ========================================================== */
body{line-height:1.6}

a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--lu-tinta);
  outline-offset: 3px;
}

/* ----- menú ----- */
header .options a{
  opacity: .75;           /* arriba de todo estaba a .4: poco contraste */
}
header .options a:hover,
header .options a:focus-visible{
  opacity: 1;
  color: var(--lu-acento);
}
header.reduce ul.options{
  background-color: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ----- pantalla de plan: mismo lenguaje que el home ----- */
section.producto{
  background: var(--lu-rosa-2);
}
section.producto h1{
  font-family: var(--lu-display);
  font-weight: 700;
  letter-spacing: -.035em;
}
section.producto .precio,
section.producto .precioOriginal{
  font-family: var(--lu-display);
  font-weight: 600;
  letter-spacing: -.02em;
}
section.producto + section .descripcion li{
  border-bottom-color: var(--lu-linea);
}
section.producto + section .descripcion li::before{
  color: var(--lu-acento);
  font-weight: 700;
}
section.producto + section .descripcion p:last-child{
  background: var(--lu-tinta);
  color: #fff;
  border-radius: var(--lu-radio);
  font-family: var(--lu-display);
  font-weight: 600;
}

/* ----- hero: la única zona con ruido ----- */
.articulo.enHome.lucila-hero{
  background: var(--lu-rosa);
  isolation: isolate;              /* las fotos (z-index:-1) quedan SOBRE el fondo y no debajo */
  overflow: visible;               /* la libreta sobresale del hero: no recortar */
}
.articulo.enHome.lucila-hero::after{       /* círculo SOBRE las fotos, translúcido y en multiply */
  content: "";
  position: absolute;
  z-index: -1;
  mix-blend-mode: multiply;
  opacity: .8;
  pointer-events: none;
  width: 40vw;
  aspect-ratio: 1;
  border-radius: 50%;
  right: 1vw;
  bottom: 2vw;
  background: var(--lu-acento);
}
.articulo.enHome.lucila-hero::before{      /* trama de puntos */
  content: "";
  position: absolute;
  z-index: -2;
  left: 2vw;
  bottom: 5vw;
  width: 28vw;
  height: 16vw;
  background: radial-gradient(circle, var(--lu-tinta) 1.6px, transparent 2.2px) 0 0 / 22px 22px;
  opacity: .4;
}
.articulo.enHome.lucila-hero h1{
  text-shadow: .03em .03em 0 rgba(255,255,255,.85);
}
.articulo.enHome.lucila-hero .texto > p:nth-child(1){
  font-weight: 700;
  letter-spacing: .06em;
}

/* ----- botón principal: el acento ----- */
.btn.btn-primary.btn-call{
  background-color: var(--lu-acento);
  box-shadow: none;
  font-weight: 600;
  color: #fff;
}
.btn.btn-primary.btn-call:hover{
  background-color: var(--lu-tinta);
  color: #fff;
}

/* ----- títulos de sección: una sola voz ----- */
.articulo.enHome.lucila-clientes h1,
#precios h2,
.articulo.enHome.lucila-puntuales h1,
.articulo.enHome.lucila-sobre-mi h1{
  font-family: var(--lu-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--lu-tinta);
}
.articulo.enHome.lucila-sobre-mi h1{
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}
.articulo.enHome.lucila-clientes h1:after,
#precios h2:after,
.articulo.enHome.lucila-puntuales h1:after{
  width: 3rem;
  height: 2px;
  margin: 1.5rem auto 3.5rem;
  background: var(--lu-tinta);
  border-radius: 0;
}

/* ----- metas: círculos en tinta, el del medio en fucsia, sobre banda rosa ----- */
.articulo.enHome.lucila-metas .texto ul li{
  font-family: var(--lu-display);
  font-weight: 700;
  letter-spacing: -.01em;
  background-color: var(--lu-tinta);
  color: #fff;
}
.articulo.enHome.lucila-metas .texto ul li:nth-child(6n+4),
.articulo.enHome.lucila-metas .texto ul li:nth-child(6n){
  background-color: var(--lu-tinta);
  color: #fff;
}
.articulo.enHome.lucila-metas .texto ul li:nth-child(3n+2){
  background-color: var(--lu-acento);
  color: #fff;
}
.articulo.enHome.lucila-metas::before{
  background: var(--lu-rosa-2);
}

/* ----- servicios: tarjetas de color, ícono en círculo blanco ----- */
.articulo.enHome.lucila-servicios ul li{
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--lu-radio);
  box-shadow: none;
  text-align: left;
  background: var(--lu-rosa-2);
  color: var(--lu-tinta);
  transition: transform .3s, background-color .3s;
}
.articulo.enHome.lucila-servicios ul li:nth-child(4n+2){ background: var(--lu-tinta);  color: #fff; }
.articulo.enHome.lucila-servicios ul li:nth-child(4n+3){ background: var(--lu-acento); color: #fff; }
.articulo.enHome.lucila-servicios ul li:nth-child(4n){   background: var(--lu-rosa);   color: var(--lu-tinta); }
.articulo.enHome.lucila-servicios ul li:hover{
  border: 0;
  box-shadow: none;
  transform: translateY(-8px);
}
.articulo.enHome.lucila-servicios ul li img{
  --ic: clamp(140px, 11vw, 170px);
  width: var(--ic) !important;
  height: var(--ic) !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  object-fit: none;               /* el SVG (96px) se centra a tamaño natural */
  padding: 0;
  background: #fff;
  border-radius: 50%;
  align-self: flex-start;
  margin-bottom: 1.25rem;
}
.articulo.enHome.lucila-servicios ul li strong,
.articulo.enHome.lucila-servicios ul li b{
  color: inherit;
  font-family: var(--lu-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
}

/* ----- clientes: foto circular con anillo propio -----
   El anillo se dibuja con box-shadow sobre la propia <img> (borde blanco + línea rosa),
   así no depende de la estructura del <li> ni de lo que haya dentro (a, strong, p). */
.articulo.enHome.lucila-clientes ul li img{
  width: var(--cl-img, 150px)!important;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-view-box: inset(var(--cl-recorte));
  border-radius: 50%;
  margin: 7px 7px 1rem;
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--lu-rosa-fuerte);
  transition: box-shadow .3s;
}
.articulo.enHome.lucila-clientes ul li img:hover{
  opacity: 1;
}
.articulo.enHome.lucila-clientes ul li a:hover img{
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--lu-acento);
}
.articulo.enHome.lucila-clientes ul li a:hover{
  color: var(--lu-acento);
}
.articulo.enHome.lucila-clientes ul li strong{
  font-family: var(--lu-display);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ----- planes: tres tarjetas iguales, el destacado en tinta ----- */
#precios .plan{
  border: 1px solid var(--lu-linea);
  border-radius: var(--lu-radio);
  box-shadow: none;
}
#precios .planPrecio{
  font-family: var(--lu-display);
  font-weight: 700;
  letter-spacing: -.03em;
}
#precios .plan:has(p > em){
  background: var(--lu-tinta);
  border: 1px solid var(--lu-tinta);
  color: #fff;
}
#precios .plan:has(p > em) .planNombre,
#precios .plan:has(p > em) .planPrecio,
#precios .plan:has(p > em) .planCaracteristicas,
#precios .plan:has(p > em) .planCaracteristicas *{
  color: #fff;
}
#precios .plan:has(p > em) .planCaracteristicas li::before{
  color: var(--lu-tinta);
}
#precios .plan:has(p > em) .planCaracteristicas p:last-child{
  border-top-color: rgba(255,255,255,.25);
}
#precios .plan:has(p > em) .btn{
  background: #fff;
  border-color: #fff;
  color: var(--lu-tinta);
}
#precios .plan:has(p > em) .btn.outline{
  background: transparent;
  border-color: #fff;
  color: #fff;
}
#precios .planCaracteristicas p:has(> em){
  background: var(--lu-acento);
  color: #fff;
}

/* ----- planes: mismo lenguaje que servicios (sin borde, hover, botón acento) ----- */
#precios.pricing::before{
  background: var(--lu-rosa-2);
}
#precios .plan{
  position: relative;
  border: 0;
  background: #fff;
  transition: transform .3s;
}
#precios .plan:hover{
  transform: translateY(-8px);
}
#precios .plan:has(p > em){
  border: 0;
}
#precios .planNombre{
  font-family: var(--lu-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.02em;
}
#precios .plan .btn:not(.outline),
#precios .plan:has(p > em) .btn:not(.outline){
  background: var(--lu-acento);
  border-color: var(--lu-acento);
  color: #fff;
}

/* ----- puntuales ----- */
.articulo.enHome.lucila-puntuales .texto li{
  border-radius: var(--lu-radio);
  background: var(--lu-rosa-2);
}
/* tarjetas blancas con línea fina; el color es solo un detalle y el CTA es lo único con fondo de color */
.articulo.enHome.lucila-puntuales .texto li{
  position: relative;
  background: #fff;
  color: var(--lu-tinta);
  border: 1px solid var(--lu-linea);
  transition: transform .3s, border-color .3s;
}
.articulo.enHome.lucila-puntuales .texto li:hover{
  transform: translateY(-6px);
  border-color: var(--lu-acento);
}
.articulo.enHome.lucila-puntuales .texto li strong,
.articulo.enHome.lucila-puntuales .texto li strong:after{
  color: inherit;
}
.articulo.enHome.lucila-puntuales .texto li strong:after{
  width: 2rem;
  height: 2px;
  background-color: var(--lu-acento);   /* el detalle de color */
}
.articulo.enHome.lucila-puntuales .btn{
  text-decoration: none;
  font-size: 1.15rem;
  padding: .9rem 2.6rem;
  box-shadow: 0 10px 24px -8px rgba(214,36,92,.55);
}
.articulo.enHome.lucila-puntuales .texto li strong{
  font-family: var(--lu-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ----- contacto: el único bloque oscuro ----- */
#contacto.contacto{
  background-color: var(--lu-tinta);
  color: #fff;
}
#contacto h2,
#contacto p,
#contacto p:nth-of-type(3) a{
  color: #fff;
}
#contacto form{
  background: #fff;
  color: var(--lu-tinta);
  padding: 1.75rem;
  border-radius: var(--lu-radio);
}
#contacto form .form-floating{        /* el textarea quedaba 4px corrido respecto de los inputs */
  padding-left: .25rem;
  padding-right: .25rem;
}
#contacto .form-control:focus{
  border-color: var(--lu-tinta);
  box-shadow: 0 0 0 .2rem rgba(45, 27, 38, .15);
}
#contacto img{
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}
#contacto h2{                          /* título en la misma tipografía que el resto */
  font-family: var(--lu-display);
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
}

/* el email estaba oculto por "#contacto p:has(+ form){display:none}": se vuelve a mostrar */
#contacto p:has(+ form){
  display: block;
}
#contacto p:nth-of-type(3){
  font-family: var(--lu-display);
  font-style: normal;
  font-weight: 500;
  font-size: 1.3rem;
}
#contacto p:nth-of-type(3) a{
  font-family: var(--lu-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  overflow-wrap: anywhere;
}

/* ----- sobre mí: panel en rosa fuerte sólido (antes un rosa translúcido, muy pastel) ----- */
.articulo.enHome.lucila-sobre-mi > .container{
  background-color: var(--lu-rosa-2);
}

footer{
  background-color: #22121b;
}

/* ----- pantalla de plan ----- */
section.producto .btn-call{
  background: var(--lu-acento);
  border-color: var(--lu-acento);
  color: #fff;
}
section.producto .btn-call:hover,
section.producto .btn-call:focus-visible{
  background: var(--lu-tinta);
  border-color: var(--lu-tinta);
  color: #fff;
}

/* ==========================================================
   MEDIA QUERIES — de menor a mayor
   ========================================================== */

@media only screen and (max-width : 479px) {
  header.inside > .container{flex-wrap:wrap;justify-content:space-between;padding:.75rem 16px}
  header.inside .logo{order:1;width:130px;margin:0}
  header.inside .hamburger{order:2;float:none;margin:0;padding:.5rem 0}
  header.inside ul.options{order:3;flex:0 0 100%;width:100%;margin:0}
  header.inside ul.options.active{height:auto;overflow:visible}
  header.inside .options a{opacity:1;display:block;padding:.85rem 0;line-height:1.2}

  .articulo.enHome.lucila-sobre-mi .container {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "imagen" "texto";
  }
  .articulo.enHome.lucila-sobre-mi h1 { text-align: center; margin: 2rem 1rem; }
  .articulo.enHome.lucila-sobre-mi .imagen img { height: 60vw; }
  .articulo.enHome.lucila-sobre-mi .texto { margin: 2rem 1rem; text-align: left; }   /* justificado en columna angosta deja huecos */

  #contacto .container {
    grid-template-columns: minmax(0,1fr);   /* evita que el form ensanche la columna */
    grid-template-rows: none;
    padding: 3rem 8.3vw;
  }
  #contacto .container > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  #contacto img {
    position: static;
    display: block;
    width: 60vw !important;
    margin: 2rem auto;
  }
  #contacto p:nth-of-type(3) a {
    font-size: min(6vw, 2.2rem);
    overflow-wrap: anywhere;
  }

  body:has(.articulo.enHome.lucila-hero) #precios{padding:calc(8vh + 12vw) 0 8vh}   /* el título no cae sobre el corte inclinado */
  #precios > .container > p{font-size:4vw}
  #precios .container > div {
    grid-template-columns: 1fr;
    max-width: 28rem;
    margin: 0 auto;
    gap: 2.5rem;
  }

  .articulo.enHome.lucila-puntuales .texto { grid-template-columns: 1fr; }
  .articulo.enHome.lucila-puntuales h1{font-size:clamp(2rem,10vw,3rem)}
  .articulo.enHome.lucila-puntuales h1:after{margin:1.5rem auto 2.5rem}

  section.producto{--plan-top:2.5rem}
  section.producto .btn-call{display:block;width:100% !important;min-width:0}
  section.producto + section .descripcion{padding:0 4px;margin:2rem auto}

  /* ----- header del home ----- */
  header:not(.inside) > .container{display:flex;flex-wrap:wrap;justify-content:flex-end;padding:.5rem 8.3vw}
  header:not(.inside) > .container > .clearfix{display:none}
  header:not(.inside) .hamburger{float:none;margin:0;padding:.5rem 0}
  header:not(.inside) ul.options{flex:0 0 100%;width:100%;float:none;margin:0;padding:0;border-bottom:0}
  header:not(.inside) ul.options.active{height:auto;overflow:visible;background:#fff}
  header:not(.inside) .options a{opacity:1;display:block;padding:.85rem 0;line-height:1.2}
  header:not(.inside).reduce,
  header:not(.inside):has(.options.active){background:rgba(255,255,255,.92);box-shadow:0 1px 8px rgba(45, 27, 38,.12)}
  header:not(.inside):has(.options.active){background:#fff}      /* menú abierto: igual que header.inside */
  header:not(.inside).reduce .logo,
  header:not(.inside):has(.options.active) .logo{
    display:block;
    align-self:center;
    width:130px;
    aspect-ratio:992.2/281.1;
    margin:0 auto 0 0;
    background:url(/custom/logo.svg) no-repeat left center / contain;
    font-size:0;
    text-indent:-9999px;
    overflow:hidden;
  }

  /* ----- hero ----- */
  .articulo.enHome.lucila-hero .container{
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:calc(var(--header-height) + 2.5rem) 8.3vw 58vw;
  }
  .articulo.enHome.lucila-hero h1{
    order:1;
    font-size:11vw;
    line-height:2;
    margin:0;
    padding-left:12vw;      /* sangría francesa: "Elsegood" baja a la derecha */
    text-indent:-12vw;
  }
  .articulo.enHome.lucila-hero .texto > p:nth-child(1){display:none}
  .articulo.enHome.lucila-hero .texto > p:nth-child(2){
    order:2;
    width:100%;
    margin:2.5rem 0 0;
    font-size:clamp(1rem,4.5vw,1.3rem);
    line-height:1.55;
    font-weight:700;
  }
  .articulo.enHome.lucila-hero .texto > p:nth-child(3){order:3;margin-top:2rem;text-align:center}
  .articulo.enHome.lucila-hero .texto > p:nth-child(3) .btn-call{padding:.9rem 3rem;font-size:1rem}
  .articulo.enHome.lucila-hero .texto > p:has(img){order:4;margin:0}
  .articulo.enHome.lucila-hero p > img:nth-of-type(1){width:28vw;top:calc(var(--header-height) + .5rem);right:-9vw}
  .articulo.enHome.lucila-hero p > img:nth-of-type(2){width:56vw;top:auto;bottom:0;left:-6vw;right:auto}
  .articulo.enHome.lucila-hero p > img:nth-of-type(3){display:none}
  .articulo.enHome.lucila-hero{position:relative;overflow-x:clip}   /* el círculo y la taza sobresalen por la derecha: no deben ensanchar la página */
  /* el círculo sube detrás de la taza (arriba a la derecha), lejos del botón */
  .articulo.enHome.lucila-hero::after{
    width:46vw;
    right:-18vw;
    bottom:auto;
    top:calc(var(--header-height) + .5rem - 9vw);
  }

  /* ----- metas ----- */
  .articulo.enHome.lucila-metas{margin-top:4rem;padding-block:0}
  .articulo.enHome.lucila-metas::before{display:none}   /* sin banda inclinada */
  .articulo.enHome.lucila-metas .texto ul{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:1.5rem}
  .articulo.enHome.lucila-metas .texto ul li{flex:0 0 auto;width:min(75vw,24rem);padding:2rem;font-size:clamp(1rem,5vw,1.4rem)}
  /* en una sola columna la alternancia es simple: tinta, fucsia, tinta, fucsia... */
  .articulo.enHome.lucila-metas .texto ul li:nth-child(n){background-color:var(--lu-tinta);color:#fff}
  .articulo.enHome.lucila-metas .texto ul li:nth-child(even){background-color:var(--lu-acento)}

  /* ----- servicios ----- */
  .articulo.enHome.lucila-servicios{margin-top:3rem}
  .articulo.enHome.lucila-servicios ul{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:2rem}
  .articulo.enHome.lucila-servicios ul li{flex:0 0 auto;width:min(85vw,28rem);padding:1.5rem;font-size:clamp(.95rem,4vw,1.15rem);line-height:1.6;text-align:center}
  .articulo.enHome.lucila-servicios ul li img{width:55%}
  .articulo.enHome.lucila-servicios ul li strong,
  .articulo.enHome.lucila-servicios ul li b{font-size:clamp(1.4rem,7vw,1.9rem)}

  /* ----- clientes (2 columnas) ----- */
  .articulo.enHome.lucila-clientes h1{font-size:clamp(2rem,10vw,3rem)}
  .articulo.enHome.lucila-clientes ul{gap:2rem 1rem}
  .articulo.enHome.lucila-clientes ul li{flex:0 0 calc(50% - .5rem);font-size:.85rem;line-height:1.4}
  .articulo.enHome.lucila-clientes ul li{--cl-img:min(38vw,160px)}
  .articulo.enHome.lucila-clientes ul li strong{font-size:1rem}
}

/* Extra Small Devices, Phones */
@media only screen and (min-width:480px) and (max-width : 767px) {
  header.inside > .container{flex-wrap:wrap;justify-content:space-between;padding:.75rem 16px}
  header.inside .logo{order:1;width:130px;margin:0}
  header.inside .hamburger{order:2;float:none;margin:0;padding:.5rem 0}
  header.inside ul.options{order:3;flex:0 0 100%;width:100%;margin:0}
  header.inside ul.options.active{height:auto;overflow:visible}
  header.inside .options a{opacity:1;display:block;padding:.85rem 0;line-height:1.2}

  .articulo.enHome.lucila-sobre-mi .container {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "imagen" "texto";
  }
  .articulo.enHome.lucila-sobre-mi h1 { text-align: center; margin: 2rem 1rem; }
  .articulo.enHome.lucila-sobre-mi .imagen img { height: 60vw; }
  .articulo.enHome.lucila-sobre-mi .texto { margin: 2rem 1rem; }

  #contacto .container {
    grid-template-columns: minmax(0,1fr);   /* evita que el form ensanche la columna */
    grid-template-rows: none;
    padding: 3rem 8.3vw;
  }
  #contacto .container > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  #contacto img {
    position: static;
    display: block;
    width: 60vw !important;
    margin: 2rem auto;
  }
  #contacto p:nth-of-type(3) a {
    font-size: min(6vw, 2.2rem);
    overflow-wrap: anywhere;
  }

  body:has(.articulo.enHome.lucila-hero) #precios{padding:8vh 0}
  #precios > .container > p{font-size:4vw}
  #precios .container > div {
    grid-template-columns: 1fr;
    max-width: 28rem;
    margin: 0 auto;
    gap: 2.5rem;
  }

  .articulo.enHome.lucila-puntuales .texto { grid-template-columns: 1fr; }   /* a todo el ancho, igual que en ≤479 */

  section.producto{--plan-top:2.5rem}
  section.producto .btn-call{display:block;width:100% !important;min-width:0}
  section.producto + section .descripcion{padding:0 4px;margin:2rem auto}

  /* ----- header del home ----- */
  header:not(.inside) > .container{display:flex;flex-wrap:wrap;justify-content:flex-end;padding:.5rem 8.3vw}
  header:not(.inside) > .container > .clearfix{display:none}
  header:not(.inside) .hamburger{float:none;margin:0;padding:.5rem 0}
  header:not(.inside) ul.options{flex:0 0 100%;width:100%;float:none;margin:0;padding:0;border-bottom:0}
  header:not(.inside) ul.options.active{height:auto;overflow:visible;background:#fff}
  header:not(.inside) .options a{opacity:1;display:block;padding:.85rem 0;line-height:1.2}
  header:not(.inside).reduce,
  header:not(.inside):has(.options.active){background:rgba(255,255,255,.92);box-shadow:0 1px 8px rgba(45, 27, 38,.12)}
  header:not(.inside):has(.options.active){background:#fff}      /* menú abierto: igual que header.inside */
  header:not(.inside).reduce .logo,
  header:not(.inside):has(.options.active) .logo{
    display:block;
    align-self:center;
    width:130px;
    aspect-ratio:992.2/281.1;
    margin:0 auto 0 0;
    background:url(/custom/logo.svg) no-repeat left center / contain;
    font-size:0;
    text-indent:-9999px;
    overflow:hidden;
  }

  /* ----- hero ----- */
  .articulo.enHome.lucila-hero .container{
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:calc(var(--header-height) + 2.5rem) 8.3vw 58vw;
  }
  .articulo.enHome.lucila-hero h1{
    order:1;
    font-size:11vw;
    line-height:2;
    margin:0;
    padding-left:12vw;      /* sangría francesa: "Elsegood" baja a la derecha */
    text-indent:-12vw;
  }
  .articulo.enHome.lucila-hero .texto > p:nth-child(1){display:none}
  .articulo.enHome.lucila-hero .texto > p:nth-child(2){
    order:2;
    width:100%;
    margin:2.5rem 0 0;
    font-size:clamp(1rem,4.5vw,1.3rem);
    line-height:1.55;
    font-weight:700;
  }
  .articulo.enHome.lucila-hero .texto > p:nth-child(3){order:3;margin-top:2rem;text-align:center}
  .articulo.enHome.lucila-hero .texto > p:nth-child(3) .btn-call{padding:.9rem 3rem;font-size:1rem}
  .articulo.enHome.lucila-hero .texto > p:has(img){order:4;margin:0}
  .articulo.enHome.lucila-hero p > img:nth-of-type(1){width:28vw;top:calc(var(--header-height) + .5rem);right:-9vw}
  .articulo.enHome.lucila-hero p > img:nth-of-type(2){width:56vw;top:auto;bottom:0;left:-6vw;right:auto}
  .articulo.enHome.lucila-hero p > img:nth-of-type(3){display:none}
  .articulo.enHome.lucila-hero{position:relative;overflow-x:clip}   /* el círculo y la taza sobresalen por la derecha: no deben ensanchar la página */
  /* el círculo sube detrás de la taza (arriba a la derecha), lejos del botón */
  .articulo.enHome.lucila-hero::after{
    width:46vw;
    right:-18vw;
    bottom:auto;
    top:calc(var(--header-height) + .5rem - 9vw);
  }

  /* ----- metas ----- */
  .articulo.enHome.lucila-metas{margin-top:4rem;padding-block:0}
  .articulo.enHome.lucila-metas::before{display:none}   /* sin banda inclinada */
  .articulo.enHome.lucila-metas .texto ul{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:1.5rem}
  .articulo.enHome.lucila-metas .texto ul li{flex:0 0 auto;width:min(75vw,24rem);padding:2rem;font-size:clamp(1rem,5vw,1.4rem)}
  /* en una sola columna la alternancia es simple: tinta, fucsia, tinta, fucsia... */
  .articulo.enHome.lucila-metas .texto ul li:nth-child(n){background-color:var(--lu-tinta);color:#fff}
  .articulo.enHome.lucila-metas .texto ul li:nth-child(even){background-color:var(--lu-acento)}

  /* ----- servicios ----- */
  .articulo.enHome.lucila-servicios{margin-top:3rem}
  .articulo.enHome.lucila-servicios ul{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:2rem}
  .articulo.enHome.lucila-servicios ul li{flex:0 0 auto;width:min(85vw,28rem);padding:1.5rem;font-size:clamp(.95rem,4vw,1.15rem);line-height:1.6;text-align:center}
  .articulo.enHome.lucila-servicios ul li img{width:55%}
  .articulo.enHome.lucila-servicios ul li strong,
  .articulo.enHome.lucila-servicios ul li b{font-size:clamp(1.4rem,7vw,1.9rem)}

  /* ----- clientes (2 columnas) ----- */
  .articulo.enHome.lucila-clientes h1{font-size:clamp(2rem,10vw,3rem)}
  .articulo.enHome.lucila-clientes ul{gap:2rem 1rem}
  .articulo.enHome.lucila-clientes ul li{flex:0 0 calc(50% - .5rem);font-size:.85rem;line-height:1.4}
  .articulo.enHome.lucila-clientes ul li{--cl-img:min(38vw,160px)}
  .articulo.enHome.lucila-clientes ul li strong{font-size:1rem}
}

/* Small Devices, Tablets */
@media only screen and (min-width:768px) and (max-width : 991px) {
  header.inside > .container{flex-wrap:wrap;justify-content:space-between;padding:.75rem 16px}
  header.inside .logo{order:1;width:130px;margin:0}
  header.inside .hamburger{order:2;float:none;margin:0;padding:.5rem 0}
  header.inside ul.options{order:3;flex:0 0 100%;width:100%;margin:0}
  header.inside ul.options.active{height:auto;overflow:visible}
  header.inside .options a{opacity:1;display:block;padding:.85rem 0;line-height:1.2}

  body:has(.articulo.enHome.lucila-hero) #precios{padding:calc(8vh + 10vw) 0 8vh}   /* el título no cae sobre el corte inclinado */
  #precios .container > div {
    grid-template-columns: 1fr;
    max-width: 32rem;
    margin: 0 auto;
    gap: 2.5rem;
  }

  .articulo.enHome.lucila-puntuales .texto { grid-template-columns: repeat(2, 1fr); }

  /* ----- header del home ----- */
  header:not(.inside) > .container{display:flex;flex-wrap:wrap;justify-content:flex-end;padding:.5rem 8.3vw}
  header:not(.inside) > .container > .clearfix{display:none}
  header:not(.inside) .hamburger{float:none;margin:0;padding:.5rem 0}
  header:not(.inside) ul.options{flex:0 0 100%;width:100%;float:none;margin:0;padding:0;border-bottom:0}
  header:not(.inside) ul.options.active{height:auto;overflow:visible;background:#fff}
  header:not(.inside) .options a{opacity:1;display:block;padding:.85rem 0;line-height:1.2}
  header:not(.inside).reduce,
  header:not(.inside):has(.options.active){background:rgba(255,255,255,.92);box-shadow:0 1px 8px rgba(45, 27, 38,.12)}
  header:not(.inside):has(.options.active){background:#fff}      /* menú abierto: igual que header.inside */
  header:not(.inside).reduce .logo,
  header:not(.inside):has(.options.active) .logo{
    display:block;
    align-self:center;
    width:130px;
    aspect-ratio:992.2/281.1;
    margin:0 auto 0 0;
    background:url(/custom/logo.svg) no-repeat left center / contain;
    font-size:0;
    text-indent:-9999px;
    overflow:hidden;
  }

  /* ----- hero ----- */
  .articulo.enHome.lucila-hero .container{
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:calc(var(--header-height) + 2.5rem) 8.3vw 58vw;
  }
  .articulo.enHome.lucila-hero h1{
    order:1;
    font-size:11vw;
    line-height:2;
    margin:0;
    padding-left:12vw;      /* sangría francesa: "Elsegood" baja a la derecha */
    text-indent:-12vw;
  }
  .articulo.enHome.lucila-hero .texto > p:nth-child(1){display:none}
  .articulo.enHome.lucila-hero .texto > p:nth-child(2){
    order:2;
    width:100%;
    margin:2.5rem 0 0;
    font-size:clamp(1rem,4.5vw,1.3rem);
    line-height:1.55;
    font-weight:700;
  }
  .articulo.enHome.lucila-hero .texto > p:nth-child(3){order:3;margin-top:2rem;text-align:center}
  .articulo.enHome.lucila-hero .texto > p:nth-child(3) .btn-call{padding:.9rem 3rem;font-size:1rem}
  .articulo.enHome.lucila-hero .texto > p:has(img){order:4;margin:0}
  .articulo.enHome.lucila-hero p > img:nth-of-type(1){width:28vw;top:calc(var(--header-height) + .5rem);right:-9vw}
  .articulo.enHome.lucila-hero p > img:nth-of-type(2){width:56vw;top:auto;bottom:0;left:-6vw;right:auto}
  .articulo.enHome.lucila-hero p > img:nth-of-type(3){display:none}
  .articulo.enHome.lucila-hero{position:relative;overflow-x:clip}   /* el círculo y la taza sobresalen por la derecha: no deben ensanchar la página */
  /* el círculo sube detrás de la taza (arriba a la derecha), lejos del botón */
  .articulo.enHome.lucila-hero::after{
    width:46vw;
    right:-18vw;
    bottom:auto;
    top:calc(var(--header-height) + .5rem - 9vw);
  }

  .articulo.enHome.lucila-hero .texto > p:nth-child(2){margin-top:4.5rem}   /* la cola de la "g" de Elsegood no pisa el texto */

  /* ----- metas ----- */
  .articulo.enHome.lucila-metas::before{top:0;height:100%;transform:none}   /* la banda acompaña las 3 filas */
  .articulo.enHome.lucila-metas .texto ul li{flex:0 0 calc(50% - 1rem);width:auto;padding:2rem;font-size:clamp(1rem,2.4vw,1.35rem)}
  /* 2 por fila, en damero: tinta/fucsia, fucsia/tinta, tinta */
  .articulo.enHome.lucila-metas .texto ul li:nth-child(n){background-color:var(--lu-tinta);color:#fff}
  .articulo.enHome.lucila-metas .texto ul li:nth-child(4n+2),
  .articulo.enHome.lucila-metas .texto ul li:nth-child(4n+3){background-color:var(--lu-acento)}

  /* ----- servicios (2 x 2) ----- */
  .articulo.enHome.lucila-servicios ul li{flex:0 0 calc(50% - 1rem);font-size:1rem;line-height:1.6;text-align:center}
  .articulo.enHome.lucila-servicios ul li strong,
  .articulo.enHome.lucila-servicios ul li b{font-size:clamp(1.3rem,2.6vw,1.6rem)}

  /* ----- clientes (2 columnas) ----- */
  .articulo.enHome.lucila-clientes ul li{flex:0 0 calc(50% - 1rem);font-size:1rem;line-height:1.4}
  .articulo.enHome.lucila-clientes ul li{--cl-img:min(30vw,220px)}

  /* ----- sobre mí ----- */
  .articulo.enHome.lucila-sobre-mi h1{margin:12vh 10% 1.5rem}
  .articulo.enHome.lucila-sobre-mi .texto{margin:0 10% 6vh;text-align:left}

  /* ----- contacto (una columna) ----- */
  #contacto .container{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:3rem 8.3vw}
  #contacto .container > *{grid-column:1 !important;grid-row:auto !important}
  #contacto img{position:static;display:block;width:min(40vw,20rem) !important;margin:2rem auto}
  #contacto p:nth-of-type(3) a{font-size:min(4vw,2.2rem);overflow-wrap:anywhere}
}

/* Medium Devices, Desktops */
@media only screen and (min-width:992px) and (max-width : 1199px) {
  /* hero y metas: textos con piso legible (1vw daba ~10px) */
  .articulo.enHome.lucila-hero .texto > p:nth-child(1){font-size:.75rem}
  .articulo.enHome.lucila-hero .texto > p:nth-child(2){font-size:max(.9rem,1.3vw);line-height:1.6}
  .articulo.enHome.lucila-metas .texto ul li{font-size:max(1rem,1.5vw)}
  .articulo.enHome.lucila-hero::before{display:none}                      /* la trama de puntos pisaba el texto a este ancho */
  .articulo.enHome.lucila-hero .texto > p:nth-child(2){margin-top:0}      /* el -6vh dejaba el texto pegado al título */

  /* servicios centrados (el justificado dejaba huecos en columnas angostas) */
  .articulo.enHome.lucila-servicios ul li{flex:0 0 calc(50% - 1rem);text-align:left;line-height:1.6}

  /* contacto: el mail entra en la columna */
  #contacto p:nth-of-type(3) a{font-size:clamp(1.5rem,3.2vw,2.2rem)}

  /* menú alineado al borde del .container (960px) */
  header ul.options, header.inside > .container{padding-left:calc((100% - 960px)/2)}

  /* header interno: logo y links en el mismo eje vertical */
  header.inside .logo{top:0}
  header.inside .options a{line-height:1.2;padding:.5rem 1rem .5rem 0}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  /* servicios y clientes: el line-height en vw se disparaba en pantallas grandes */
  .articulo.enHome.lucila-servicios ul li{font-size:clamp(.95rem,1.1vw,1.2rem);line-height:1.6;text-align:center}
  .articulo.enHome.lucila-clientes ul li{line-height:1.5}
  .articulo.enHome.lucila-servicios ul li strong,
  .articulo.enHome.lucila-servicios ul li b{min-height:2.9em}

  /* menú alineado al borde del .container (1140px; 1320px desde 1400) */
  header ul.options, header.inside > .container{padding-left:calc((100% - 1140px)/2)}

  /* header interno: logo y links en el mismo eje vertical */
  header.inside .logo{top:0}
  header.inside .options a{line-height:1.2;padding:.5rem 1rem .5rem 0}
  @media (min-width:1400px){
    header ul.options, header.inside > .container{padding-left:calc((100% - 1320px)/2)}
  }
}

@media print {}