/* =========================================================
   RESET
========================================================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

a{
  text-decoration:none;
  color:inherit;
}

button,
input,
textarea,
select{
  font-family:inherit;
}

/* =========================================================
   FUENTE PERSONALIZADA
========================================================= */
@font-face{
  font-family:'Sweet Affogato';
  src:url('../fonts/SweetAffogato.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

/* =========================================================
   VARIABLES
========================================================= */
:root{

  --color-primary:#2196f3;
  --color-primary-hover:#1976d2;

  --color-text:#1c1e21;
  --color-text-light:#65676b;

  --color-border:#dfe3e8;
  --color-bg:#f0f2f5;
  --color-card:#ffffff;

  --shadow-sm:0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:0 10px 30px rgba(0,0,0,0.08);

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;

  --transition:all .25s ease;
}

/* =========================================================
   BODY
========================================================= */
body{
  font-family:"Roboto", sans-serif;
  background:var(--color-bg);
  color:var(--color-text);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* Fondo moderno */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(33,150,243,0.08), transparent 30%),
    radial-gradient(circle at bottom right, rgba(33,150,243,0.06), transparent 25%);
  pointer-events:none;
  z-index:0;
}

body *{
  position:relative;
  z-index:1;
}

/* =========================================================
   HEADER
========================================================= */
header{
  width:100%;
  position:sticky;
  top:0;
  z-index:999;
  backdrop-filter:blur(16px);
  background:rgba(255,255,255,0.75);
  border-bottom:1px solid rgba(255,255,255,0.4);
}

.header{
  width:100%;
  max-width:1300px;
  margin:auto;
  padding:16px 24px !important;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  height:42px;
  object-fit:contain;
}

/* =========================================================
   BOTÓN CANCELAR
========================================================= */
#cancelar{
  display:flex;
  align-items:center;
  gap:10px;

  border:none;
  background:#fff;

  padding:12px 18px;

  border-radius:14px;

  color:#1c1e21;
  font-weight:600;
  font-size:14px;

  cursor:pointer;

  transition:var(--transition);

  box-shadow:var(--shadow-sm);
}

#cancelar:hover{
  transform:translateY(-2px);
  background:#f7f7f7;
  box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.login-icon{
  width:28px;
  height:28px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#f0f2f5;
}

/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */
.contenedor-principal{
  width:100%;
  max-width:1250px;

  margin:35px auto;
  padding:0 20px;

  display:flex;
  gap:35px;
  align-items:flex-start;
  justify-content:center;
}

/* =========================================================
   CARD SLIDER
========================================================= */
.contenedor-slider{
  flex:1;

  background:var(--color-card);

  border-radius:var(--radius-lg);

  padding:22px;

  box-shadow:var(--shadow-md);

  display:flex;
  flex-direction:column;
  gap:18px;
}

/* =========================================================
   IMAGEN PRINCIPAL
========================================================= */
.contenedor-imagen-principal{
  position:relative;

  width:100%;
  height:430px;

  border-radius:22px;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #f8fafc,
    #eef3f8
  );

  border:1px solid #edf1f5;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:var(--transition);
}

.contenedor-imagen-principal:hover{
  transform:translateY(-2px);
}

.contenedor-imagen-principal img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Placeholder */
.icono-placeholder{
  font-size:50px;
  color:#90a4ae;
}

.mensaje-placeholder{
  font-size:15px;
  color:#607d8b;
  font-weight:500;
  margin-left:10px;
}

/* =========================================================
   CAMBIAR IMAGEN
========================================================= */
.cambiar-imagen{
  position:absolute;
  bottom:18px;
  right:18px;

  width:48px;
  height:48px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,0.95);

  backdrop-filter:blur(12px);

  font-size:22px;
  color:#1c1e21;

  cursor:pointer;

  box-shadow:0 10px 25px rgba(0,0,0,0.15);

  transition:var(--transition);
}

.cambiar-imagen:hover{
  transform:scale(1.08);
}

/* =========================================================
   MINIATURAS
========================================================= */
.contenedor-miniaturas{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.boton-miniatura{
  border:none;
  background:none;
  cursor:pointer;
}

.miniatura{
  width:92px;
  height:92px;

  border-radius:18px;

  object-fit:cover;

  transition:var(--transition);

  border:3px solid transparent;

  box-shadow:0 4px 12px rgba(0,0,0,0.06);
}

.miniatura:hover{
  transform:translateY(-4px);
  opacity:.88;
}

/* =========================================================
   CARD FORMULARIO
========================================================= */
.contenido-detalle{
  flex:1;

  background:var(--color-card);

  border-radius:var(--radius-lg);

  padding:30px;

  box-shadow:var(--shadow-md);

  display:flex;
  flex-direction:column;
  gap:20px;
}

/* =========================================================
   PERFIL
========================================================= */
.titulo-verificado{
  display:flex;
  align-items:center;
  gap:12px;
}

.titulo-verificado .img-perfil{
  width:56px;
  height:56px;

  border-radius:18px;

  object-fit:cover;

  box-shadow:0 5px 15px rgba(0,0,0,0.10);
}

.titulo-verificado img:not(.img-perfil){
  width:20px;
  height:20px;
}

.titulo-superior{
  font-size:18px;
  font-weight:700;
  color:var(--color-text);
}

/* =========================================================
   CAMPOS
========================================================= */
.campo{
  position:relative;
  width:100%;
}

.input-texto,
.seleccionar-oferta,
.seleccionar-mascota{
  width:100%;

  border:1.5px solid var(--color-border);

  background:#fff;

  border-radius:16px;

  padding:20px 16px 12px;

  font-size:15px;
  color:var(--color-text);

  outline:none;

  transition:var(--transition);
}

.input-texto:hover,
.seleccionar-oferta:hover{
  border-color:#b7c5d3;
}

.input-texto:focus,
.seleccionar-oferta:focus{
  border-color:var(--color-primary);

  box-shadow:
  0 0 0 4px rgba(33,150,243,0.12);
}

/* Textarea */
.textarea{
  min-height:140px;
  resize:none;
}



/* =========================================================
   LABELS FLOTANTES
========================================================= */
.campo label{
  position:absolute;

  left:16px;
  top:18px;

  font-size:14px;
  color:var(--color-text-light);

  background:#fff;

  padding:0 6px;

  pointer-events:none;

  transition:var(--transition);
}

.input-texto:focus + label,
.input-texto:not(:placeholder-shown) + label{
  top:-10px;
  left:14px;

  font-size:12px;

  color:var(--color-primary);

  font-weight:600;
}

/* =========================================================
   LABELS SELECT
========================================================= */
.elegir-oferta{
  position:absolute;

  top:-10px;
  left:14px;

  background:#fff;

  padding:0 8px;

  font-size:12px;
  font-weight:600;

  color:var(--color-primary);

  z-index:2;
}

/* =========================================================
   DESCUENTO
========================================================= */
.precio-descuento{
  font-weight:700;
  margin-left:5px;
}

/* =========================================================
   BOTÓN AGREGAR
========================================================= */
.boton-mascota{
  width:100%;

  border:none;

  border-radius:18px;

  padding:16px;

  background:
  linear-gradient(
    135deg,
    #2196f3,
    #1976d2
  );

  color:#fff;

  font-size:15px;
  font-weight:700;

  cursor:pointer;

  transition:var(--transition);

  box-shadow:
  0 10px 25px rgba(33,150,243,0.30);
}

.boton-mascota:hover{
  transform:translateY(-3px);

  box-shadow:
  0 18px 35px rgba(33,150,243,0.38);
}

.boton-mascota:active{
  transform:scale(.98);
}

/* =========================================================
   FOOTER
========================================================= */
.footer{
  margin-top:60px;
}

/* =========================================================
   QUERIES
========================================================= */
@media (max-width:1024px){

  .contenedor-principal{
    flex-direction:column;
    align-items:center;
  }

  .contenedor-slider,
  .contenido-detalle{
    width:100%;
    max-width:760px;
  }
}

@media (max-width:768px){

  .header{
    padding:14px 16px !important;
  }

  .contenedor-principal{
    margin:20px auto;
    gap:20px;
    padding:0 12px;
  }

  .contenedor-slider,
  .contenido-detalle{
    border-radius:22px;
    padding:18px;
  }

  .contenedor-imagen-principal{
    height:330px;
    border-radius:18px;
  }

  .miniatura{
    width:78px;
    height:78px;
  }

  .titulo-superior{
    font-size:16px;
  }

  .input-texto,
  .seleccionar-oferta{
    font-size:14px;
  }

  .boton-mascota{
    padding:15px;
  }
}

@media (max-width:480px){

  .logo{
    height:35px;
  }

  #cancelar{
    padding:10px 14px;
    font-size:13px;
  }

  .contenedor-principal{
    padding:0;
    margin-top:0;
  }

  .contenedor-slider,
  .contenido-detalle{
    border-radius:0;
    box-shadow:none;
  }

  .contenedor-imagen-principal{
    height:280px;
    border-radius:0;
  }

  .miniatura{
    width:70px;
    height:70px;
    border-radius:14px;
  }

  .contenido-detalle{
    padding:20px 16px 30px;
  }

  .campo label{
    font-size:13px;
  }

  .boton-mascota{
    border-radius:16px;
  }
}